案例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. lucene源码分析(8)MergeScheduler

    1.使用IndexWriter.java mergeScheduler.merge(this, MergeTrigger.EXPLICIT, newMergesFound); 2.定义MergeSch ...

  2. BEA-141150 - An error occurred while preparing application component uri of application application with HTTP response responseCode: message

    网上查询的 Cause:This is either because the resource it self is not available on the administration serve ...

  3. elasticsearch插件的开发--计算特征向量的相似度

    目录 更改elasticsearch的score评分 插件源码解读 脚步一 脚本二(fast-vector-distance) 部署 测试 创建索引 查询 版本说明 项目详细见github 参考文献 ...

  4. linux下在线升级nodejs

    因现有项目需要用一个截屏node包,此包必须新版本,所以紧急升级下测试环境nodejs,后续再升级线上,小小试了下node在线升级 方案1,使用npm安装n模块,使用n来升级nodejs 首先要知道n ...

  5. JAVA-7NIO之Socket/ServerSocket Channel

    一.ServerSocketChannel Java NIO中的 ServerSocketChannel 是一个可以监听新进来的TCP连接的通道, 就像标准IO中的ServerSocket一样.Ser ...

  6. awk去重以某列重复的行

    [root@localhost cc]# cat 2.txt adc 3 5 a d aa 3 adfa d ba 3 adf 去重第一列重复的行: [root@localhost cc]# cat ...

  7. Ionic3 UI组件之 ImageViewer

    组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ...

  8. mui 百度语音识别转换文字

    前言 用mui混合开发的APP,现有一个功能需求就是语音转换成文字,并把语音进行保存.对此考虑两种选择讯飞和百度.最终选择了百度语音. 百度语音 通过官方文档我们大致可以确定如果想要实现语音识别,要做 ...

  9. PCA vs Linear Regression 可视化理解

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

  10. JSP学习笔记(1)-JSP简介

    1.什么是JSP? JSP是Java server page的缩写,有sun公司倡导,许多公司参与,于1999年推出的一种web服务设计标准.JSP基于Java Servlet以及整个java体系的W ...