css3实现border渐变色
案例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渐变色的更多相关文章
- css3学习--border
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...
- Css3 圆角和渐变色问题(IE9)
border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#569B0E', endC ...
- css3 做border = 0.5px的细线
参考: https://blog.csdn.net/Tyro_java/article/details/52013531
- CSS3 用border写 空心三角箭头 (两种写法)
之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- css3图形绘制
以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...
- css3之图形绘制
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...
- 总结html
1.初识html W3C : 万维网联盟!(World Wide Web Consortium ) 创建于1994年,是web技术领域最权威最具有影响力的标准机构! W3C规定 ...
- 你务必知道的css简写
欢迎加入前端交流群来py:749539640 简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...
随机推荐
- 如何在.Net Core MVC中为动态表单开启客户端验证
非Core中的请参照: MVC的验证 jquery.validate.unobtrusive mvc验证jquery.unobtrusive-ajax 参照向动态表单增加验证 页面引入相关JS: &l ...
- IOS应用图标尺寸
Table 41-1Size (in pixels) of custom icons and images Asset iPhone 6 Plus (@3x) iPhone 6 and iPhone ...
- [转]C#综合揭秘——Entity Framework 并发处理详解
本文转自:http://www.cnblogs.com/leslies2/archive/2012/07/30/2608784.html 引言 在软件开发过程中,并发控制是确保及时纠正由并发操作导致的 ...
- ant编译apache-nutch-2.2.1结合mysql实现爬虫的安装配置全过程
之前的数据抓取都是用的八爪鱼软件,老大突发奇想要我自己搞个爬虫来抓取数据,网上找找貌似apache的nutch比较合适,于是就开始安装这啥nutch. 对于一个linux零基础的人来说,还要先学学li ...
- ubuntu系统
Ubuntu 18.04 NVIDIA驱动安装总结:(需要和自己电脑上的显卡配套) https://blog.csdn.net/tjuyanming/article/details/80862290 ...
- C#基础笔记(第十四天)
1.MD5加密 用户在数据库存密码需要进行再加密,这样一个过程叫MD5加密只要涉及到存用户的密码一定要用MD5加密MD5密码一般都是16进制的把一个密码转换成16进制的过程就叫MD5加密把字符串加密成 ...
- 十八、curator recipes之DistributedDelayQueue
简介 curator实现了类似DelayQueue的分布式延迟队列 官方文档:http://curator.apache.org/curator-recipes/distributed-delay-q ...
- 撩课-Java每天5道面试题第24天
151.springMVC和struts2的区别有哪些? .springmvc的入口是一个servlet即前端控制器(DispatchServlet), 而struts2入口是一个filter过虑器( ...
- hdu 1023 卡特兰数《 大数》java
Train Problem II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- IntelliJ IDEA 使用经验总结
一. 准备工作 1. 点击此下载 IntelliJ IDEA 开发工具 二. 注册 1. 修改 C:\Windows\System32\drivers\etc\hosts ,在末尾添加 0.0.0 ...