background、border 渐变色-CFANZ编程社区

背景渐变色：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>