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 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...
随机推荐
- ARC基本原理
基本简介 ARC是Automatic Reference Counting(自动引用计数器)的简称. ARC是ios5.0引入的新特性,完全消除手动管理内存的繁琐,编译器会自动在适合的代码里面插入适当 ...
- 利用CEF山寨一个翻译器
起因 在某些情况下,有将从某种类型的语言翻译成另一种类型语言的需求.比如在生成实体时,可能需要将中文名称转换成英文.于是利用CEFSharp山寨了一个翻译器.效果图如下: CEF简介 CEF全称为Ch ...
- PHP · MySQL函数
连接名=mysql_connect("主机","用户名","密码"); 连接名=mysql_qconnect("主机", ...
- oracle序列的创建和使用
oracle 序列的创建与使用 (2012-03-15 16:14:09) -------------------------------------------------------------- ...
- WireShark 过滤 SSDP
在局域网中使用wireshark抓包过滤http的时候经常会出现一些干扰协议,例如SSDP,使用过滤条件"http"有可能出现N多ssdp包,如下图所示: SSDP:Simple ...
- gRPC的通讯过程
在 HTTP2 协议正式开始工作前, 如果已经知道服务器是 HTTP2 的服务器, 通讯流程如下: 客户端必须首先发送一个连接序言,其逻辑结构: PRI * HTTP/2.0\r\n\r\nSM\r\ ...
- Python中新式类和经典类的区别,钻石继承
1)首先,写法不一样: class A: pass class B(object): 2)在多继承中,新式类采用广度优先搜索,而旧式类是采用深度优先搜索. 3)新式类更符合OOP编程思想,统一了pyt ...
- 转:javascript时间戳和日期字符串相互转换
转:javascript时间戳和日期字符串相互转换 <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- Spring Boot—11控制器Controller
package com.sample.smartmap.controller; import org.springframework.beans.factory.annotation.Autowire ...
- 图片加载库Glide的封装工具类,方便以后使用
直接上源码.注释得已经很清晰了,直接调用即可. package com.liuguilin.lovewallpaper.utils; /* * Created by 火龙裸先生 on 2017/3/3 ...