案例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. Core中使用Hangfire

    之前使用Quartz.Net,后来发现hangfire对Core的继承更加的好,而且自带管理后台,这就比前者好用太多了. 安装注册 安装 PM> Install-Package Hangfire ...

  2. canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形

    canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...

  3. 安装和使用mongodb

    环境: Ubuntu 13.04 安装MongoDB $sudo apt-get install mongodb 会自动安装libpcrecpp0 libboost-system1.42.0 libb ...

  4. 熟悉一下oncontextmenu事件的知识

    定义和使用 只要点击鼠标右键,就触发oncontextmenu事件并打开上下文菜单. 需要注意的是:所有主流浏览器都支持oncontextmenu事件,但其中的contextmenu元素只有FireB ...

  5. C#语法之Linq查询基础一

    Linq做.Net开发的应该都用过,有些地方很复杂的逻辑用Linq很方便的解决.对于Linq to object.Linq to xml.Linq to sql.Linq to Entity(EF)都 ...

  6. [转]SQL Server 2008- Get table constraints

    本文转自:https://stackoverflow.com/questions/14229277/sql-server-2008-get-table-constraints You should u ...

  7. [转] 如何选择正确的Hadoop版本

    Gartner:如何选择正确的Hadoop版本 这份报告的全名是<How to Choose the Right Apache Hadoop Distribution>.主要介绍了企业如何 ...

  8. automapper 自动映射 集成asp.net Core2.1

    学习博文:https://www.cnblogs.com/yan7/p/8085410.html 1.使用nuget 安装 <PackageReference Include="Aut ...

  9. MyEclipse中设置代码块快捷键

    如果想用快捷键生成一段自定义代码,可以通过下面方式设置: Java->Editor->Templates->New 如果要设置或者更改某个快捷键,如要设置保存全部文档的快捷键(系统默 ...

  10. shell与expect结合使用

    在linux操作系统下,使用脚本自动化,一般由两种方案,方案一:telnet+ftp,方案二:ssh+scp+expect. 以下主要使用ssh+scp+expect为例进行说明使用方式. 第一步:安 ...