边框渐变border-image与border-radius冲突

边框渐变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;
 }