问:边框可以实现渐变吗?
答案:可以
.border-block {
width: 100px;
height: 100px;
border: 10px solid transparent;
border-image: linear-gradient(to top, blue, red);
border-image-slice: 10;
}
<div class="border-block"></div>
边框的确可以用渐变来写,但是不支持圆角,如果想要支持圆角怎么办呢?
我用背景色的渐变和padding实现的
.bigbox {
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%, pink 90%);
background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);
background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);
}
.box {
width:100%;
height:100%;
border-radius:50%;
background:#fff;
}
<div class="bigbox">
<div class="box"></div>
</div>
哈哈我是不是很聪明