需求:用css设置渐变边框 通过border-image来实现渐变色边框
<div class="content"></div>
.content {
width: 100px;
height: 100px;
border:10px solid #ddd;
border-image: -webkit-linear-gradient(red,yellow) 30 30;
border-image: -moz-linear-gradient(red,yellow) 30 30;
border-image: linear-gradient(red,yellow) 30 30;
}
![](https://www.codeprj.com/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTAyMjE1MS8yMDE5MTEvMTAyMjE1MS0yMDE5MTExMjE2MzgzMTA5OC04NTIxNDM2NTAucG5n.png)
但是border-image无法实现圆角,所以换一个思路:通过padding来实现,给父节点设置渐变背景,通过padding模拟边框(此处的padding值就是border需要的值),注意父元素和子元素的border-radius属性值保持一致
<div class="content">
<div class="box"></div>
</div>
.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%;
border-radius:50%;
background:#fff;
}
效果图:
![在这里插入图片描述](https://www.codeprj.com/image/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuLzIwMTgxMTAxMTEwODUwNzc2LnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3dhdGVybWFyayx0eXBlX1ptRnVaM3BvWlc1bmFHVnBkR2ssc2hhZG93XzEwLHRleHRfYUhSMGNITTZMeTlpYkc5bkxtTnpaRzR1Ym1WMEwzTm9kV2x6WlhsaGJtZG5kV0Z1Wnc9PSxzaXplXzE2LGNvbG9yX0ZGRkZGRix0Xzcw.png)
原文链接:https://blog.csdn.net/shuiseyangguang/article/details/83618757 |