css3背景和border渐变色写法，和使用border-ima
2020-02-11 本文已影响0人
北风吹_yfy
渐变色问题
css3背景渐变色写法：
#box {
width: 100px;
height: 50px;
/* background-image: linear-gradient(90deg, rgba(33, 30, 190, 0.8),
rgba(153, 120, 29, 0.8) 20%, rgba(214, 214, 23, 0.8) 70%,
rgba(37, 158, 91, 0.8)); */
/* 等同于 */
background-image: linear-gradient(to right, rgba(33, 30, 190, 0.8),
rgba(153, 120, 29, 0.8) 20%, rgba(214, 214, 23, 0.8) 70%,
rgba(37, 158, 91, 0.8));
}
image.png
css3 border渐变色写法:
#box {
width: 100px;
height: 50px;
border: 1px solid;
border-image: linear-gradient(to right, rgba(0, 255, 255, 0.8),
rgba(255, 255, 0, 0.8) 20%, rgba(255, 255, 0, 0.8) 80%,
rgba(0, 255, 255, 0.8)) 1;
}
同样可以把to right 换成90deg。
image.png
如果只要一个方向渐变，可以参考以下写法：
border: 1px solid;
border-image: linear-gradient(to left, rgba(0, 255, 255, 0),
rgba(68, 2, 189, 0.8) 20%, rgba(212, 104, 3, 0.8) 80%,
rgba(0, 255, 255, 0)) 1;
image.png
关于使用border-image后，border-radius无效的问题
方法一和方法二都是通过padding来实现，给父节点设置渐变背景，通过padding模拟边框（此处的padding值就是border需要的值），注意父元素和子元素的border-radius属性值保持一致。
方法一：
#box {
width: 100px;
height: 50px;
position: relative;
border: 4px solid transparent;
border-radius: 16px;
background: linear-gradient(orange, violet);
background-clip: padding-box;
padding: 10px;
/* just to show box-shadow still works fine */
}
#box::after {
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
background: linear-gradient(red, blue);
content: '';
z-index: -1;
border-radius: 16px;
}
image.png
方法二：
<body>
<div id="box">
<div class="content"></div>
</div>
</body>
#box {
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%);
}
.content {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
}
image.png
方法三：
给父元素设置border-radius即可
#box {
width: 100px;
height: 100px;
border: 5px solid transparent;
border-radius: 10px;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 5px solid;
border-image: linear-gradient(to right, #0a0aa7, rgb(134, 13, 13)) 1;
}
image.png
