案例1
.box{
width: 100px;
height: 100px;
border:10px solid #ddd;
border-image: -webkit-linear-gradient(#ddd,#000) 30 30;
border-image: -moz-linear-gradient(#ddd,#000) 30 30;
border-image: linear-gradient(#ddd,#000) 30 30;
}
案例2

.navbox{ border-right: 1px solid;
   border-image: -webkit-linear-gradient(#00569D , white , #00569D)1 10 1; /* 控制边框颜色渐变 */
  border-image: -moz-linear-gradient(#00569D , white , #00569D)1 10 1;
  border-image: linear-gradient(#00569D , white , #00569D)1 10 1; /* 标准的必须写在最后 */
}

css3实现border渐变色的更多相关文章

  1. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  2. Css3 圆角和渐变色问题(IE9)

    border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#569B0E', endC ...

  3. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

  4. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  5. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  6. css3图形绘制

    以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...

  7. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  8. 总结html

    1.初识html W3C : 万维网联盟!(World Wide Web Consortium )   创建于1994年,是web技术领域最权威最具有影响力的标准机构!           W3C规定 ...

  9. 你务必知道的css简写

    欢迎加入前端交流群来py:749539640   简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...

随机推荐

  1. 遇见CUBA CLI

    原文:Meet CLI for CUBA Platform 翻译:CUBA China CUBA-Platform 官网 : https://www.cuba-platform.com CUBA Ch ...

  2. Socket编程 - API

    基础知识部分:http://www.cnblogs.com/Jimmy1988/p/7839940.html 1. 基本流程 Process Client Server Comment socket( ...

  3. js jq封装ajax方法

    json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"adm ...

  4. [转]WebForm中使用MVC

    本文转自:https://www.cnblogs.com/encoding/articles/3556046.html 前言 掐指一算,3年没写博了,好懒的说... 众所周知,MVC现在越来越火了,不 ...

  5. 【手记】解决启动SQL Server Management Studio 17时报Cannot find one or more components...的问题

    刚装好SSMS 17.1准备体验,弹出: 一番搜索,普遍办法都是安装VS2015独立shell.删除某个注册表项什么的,没用,首先这个shell我是装了的,然后也没有那个注册表项.我自己尝试过重装sh ...

  6. 简单的自定义Session

    有关Session.Cookie机制建议参考文章:CookieSession机制详解,写的很详细,不再赘述 本篇文章通过一个简单的案例揭秘Session机制以及和Cookie的区别和联系: 服务器端代 ...

  7. fzu 2132 LQX的作业

    Problem 2132 LQX的作业 Accept: 67    Submit: 150Time Limit: 1000 mSec    Memory Limit : 32768 KB Proble ...

  8. [选译]MySQL5.7以上Zip版官方安装文档

    前言 在windows上安装Zip版MySQL(选译) 学习mysql的朋友们会发现5.7+版本的mysql变得比以前难安装了许多(当然我们可以选择installer版本,但是这样总感觉对学习mysq ...

  9. redis 批量删除key

    redis-cli -h -p keys -p del s

  10. HTML5 number类型文本框step属性的验证机制——张鑫旭

    我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识 ...