边框渐变border-image: linear-gradient与border-radius冲突
1、实现边框渐变
实现普通的边框渐变直接用到border-image加上linear-gradient就可以实现了
边框渐变.png
p {
background-color: #402e22;
color: #fff;
border: 4px solid transparent;
border-image: linear-gradient(
to right,
rgba(0, 255, 162, 1),
rgba(0, 228, 255, 1)
);
border-image-slice: 10%;
}
2、实现边框渐变与圆角
因为border-image与border-radius冲突，所以我这里用到伪类来实现圆角加边框渐变的css效果
圆角边框渐变效果图.png
p {
background-color: #402e22;
color: #fff;
border-radius: 24px;
position: relative;
}
p::after {
content: '';
display: block;
position: absolute;
top: -2px;
right: -2px;
bottom: -1px;
left: -2px;
border-radius: 50px;
background: linear-gradient(90deg, #ff7800, #ffcc00);
z-index: -1;
}
