案例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. WPF 进程间传递参数

    WPF 进程间传递参数          在软件开发中有时需要在一个软件中启动另一个软件,这时用Process.Start(“软件路径”)可以启动另一个软件.如果在这个过程中还需要传递一些参数给新启动 ...

  2. 微信小程序开发,服务器端获取不到请求参数

    微信的request请求请求方式为 GET 时,可以在后台获取到请求的参数 userName 当为POST请求时则获取不到 userName 参数 解决方案是 在 设置一下 headers 里添加 ' ...

  3. 我是怎么从安卓到php再成为前端开发工程师的

    记得我下定决心学Android(安卓)是17年的暑假,暑假前,学校组织了一次集训,美其名曰帮我们巩固知识,实际上就是学校和长沙的培训学校某牛达成了合作,教我们一些基础知识,然后集训完建议那些在学校没学 ...

  4. [转]查看SQL Server被锁的表以及如何解锁

    本文转自:https://www.cnblogs.com/shy1766IT/p/6225694.html 锁定数据库的一个表的区别 SELECT * FROM table WITH (HOLDLOC ...

  5. PHP 类与对象 全解析( 一)

    目录 PHP 类与对象 全解析( 一) PHP 类与对象 全解析( 二) PHP 类与对象 全解析(三 ) 1.类与对象 对象:实际存在该类事物中每个实物的个体.$a =new User(); 实例化 ...

  6. 十七、curator recipes之DistributedPriorityQueue

    简介 官方文档:http://curator.apache.org/curator-recipes/distributed-priority-queue.html javaDoc:http://cur ...

  7. PCA vs Linear Regression 可视化理解

    https://shankarmsy.github.io/posts/pca-vs-lr.html https://shapeofdata.wordpress.com/2013/04/09/princ ...

  8. Var与Dynamic的区别

    1.var与dynamic的区别   C#中的很多关键词用法比较容易混淆,var和dynamic就是其中一组,但其实它们是有本质的区别的.var 在编译阶段已经确定类型,在初始化时候,必须提供初始化的 ...

  9. CodeForces765C

    C. Table Tennis Game 2 time limit per test:2 seconds memory limit per test:512 megabytes input:stand ...

  10. Linux安装配置mysql

    1.假设已经有mysql-5.5.10.tar.gz以及cmake-2.8.4.tar.gz两个源文件 (1)先安装cmake(mysql5.5以后是通过cmake来编译的) [root@ rhel5 ...