邊框漸變border-image: linear-gradient與border-radius沖突

1、實(shí)現(xiàn)邊框漸變

實(shí)現(xiàn)普通的邊框漸變直接用到border-image加上linear-gradient就可以實(shí)現(xiàn)了

邊框漸變.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、實(shí)現(xiàn)邊框漸變與圓角

因?yàn)閎order-image與border-radius沖突，所以我這里用到偽類來實(shí)現(xiàn)圓角加邊框漸變的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;
 }