案例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. CSS选择器详解(一)常用选择器

    目录 类型选择器 类选择器 ID选择器 伪类 伪元素 类型选择器 通过类型选择器可以选择某一类型的html标签,并对其使用样式. 语法: selector {property1: value; pro ...

  2. 用java做操作系统内核:软盘读写

    在前两节,我们将一段代码通过软盘加载到了系统内存中,并指示cpu执行加入到内存的代码,事实上,操作系统内核加载也是这么做的.只不过我们加载的代码,最大只能512 byte, 一个操作系统内核,少说也要 ...

  3. C# byte 和 char 转化

    C#  byte 和 char 可以认为是等价的.但是在文本显示的时候有差异.   c# 使用的是unicode字符集,应该和为ascii相互转换 只能转换到字符的unicode编码,或者由unico ...

  4. CEF加载FLASH插件时弹出CMD命令行窗口的问题

    这个是flash插件的一个bug,CEF(chromium系列浏览器)关闭sandbox第一次加载flash插件就会跳出这样的一个提示,在Google官方也看到了chromium的issue: 解决方 ...

  5. 关于C#判断是否是数字的正则式

    有话要说 今天我同事突然让我帮他看个问题,他说想不通为什么数据库中会有不合法的内容,我都已经用正则过滤了,并且在本地调通了的! 我问他是不是你正则有问题,他说没问题啊,前端和后端的正则是一样的,前端我 ...

  6. IT农民的开发人员工具清单(2013年)

    IT行业日新月异,每天都不断变化着.作为一名混迹IT行业小有几个年头码农来说,不仅要时刻提高自身技术,也要不断更新自己开发工具.这些工具都是我吃饭的饭碗.饭碗旧了也是需要买个新的.转眼之间,已到201 ...

  7. MQ与Webservice的区别

    Webservice 和MQ(MessageQueue)都是解决跨平台通信的常用手段,两者有哪些区别呢? 个人认为最本质的区别在于 Webservice近乎实时通信,而MQ却通常是延时通信. 什么意思 ...

  8. 小tip: base64:URL背景图片与web页面性能优化——张鑫旭

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

  9. 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题

    因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...

  10. margin相关基本知识

    什么是 margin ? CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界,元素 ...