在实际开发中,CSS中 border 用了border-image,用border-radius圆角就会失效,所以可以通过伪元素::before
或者::after
,使用背景线性渐变模拟实现。
.border-test {
width: 200px;
height: 200px;
position: relative;
border: 4px solid transparent;
background-color: #fff;
border-top-right-radius: 50px;
background-clip: padding-box;
}
.border-test::after {
content: "";
display: block;
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-top-right-radius: 50px;
background: linear-gradient(155deg,red, blue);
z-index: -1;
}