背景渐变色：background
linear-gradient 线性渐变色
radial-gradent 径向渐变
示例：
background: radial-gradient(50px, #f00, #ff0, #080)
background: linear-gradient(to top right, #000, skyblue 10px , #090);
border渐变色
1.border-image
'20为宽度'
border-image：linear-gradient(50px, #f00, #ff0, #080) 20；
border-image: radial-gradient(to top right, #000, skyblue 10px , #090) 20;
2.border-colors 只有火狐支持
-moz-border-top-colors:red orange yellow green cyan blue purple;
-moz-border-right-colors: red orange yellow green cyan blue purple;
-moz-border-bottom-colors: red orange yellow green cyan blue purple;
-moz-border-left-colors: red orange yellow green cyan blue purple;
3.使用 background-origin 、background-clip实现
background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(180deg,#000,#000),linear-gradient(180deg,red,yellow);
border:8px transparent solid;
4.通过padding实现，并支持 倒圆角
给父节点设置渐变背景，通过padding模拟边框（此处的padding值就是border需要的值），注意父元素和子元素的border-radius属性值保持一致
<html>
<head>
<style type="text/css">
.content {
width: 100px;
height: 100px;
box-sizing: border-box;
padding: 5px;
border-radius:50%;
background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);
}
.box {
width:100%;
height:100%;
background:#fff;
border-radius:50%;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
网友评论