1. 首页
  2. 问题
  3. 具有边界半径的边界渐变
小编典典

具有边界半径的边界渐变

css

我有以下CSS：

a.btn.white-grad {
    background: $lgrey;
    color: #313149 !important;
    border: 1px solid #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    border-image-slice: 20;
    float: left;
    @include font-size(26);
    margin: 75px 0;
}

添加边框半径：5px似乎没有任何作用，我认为这是因为我使用的是边框渐变，我是否有办法完全实现所需的5px边框半径？


阅读 393

收藏
2020-05-16

共1个答案

小编典典

You cannot use border-radius with gradient. Here is another idea where you
can rely on multiple background and adjust the background-clip:

.white-grad {

    background:

     linear-gradient(#ccc,#ccc) padding-box, /*this is your grey background*/

     linear-gradient(to right, #9c20aa, #fb3570) border-box;

    color: #313149;

    padding:10px;

    border: 5px solid transparent;

    border-radius:15px;

    display:inline-block;

    margin: 75px 0;

}


<div class="white-grad"> Some text here</div>



<div class="white-grad"> Some long long long text here</div>



<div class="white-grad"> Some long long <br>long text here</div>

如果需要透明性，可以考虑使用SVG，如下所示：

svg {

  width:200px;

  height:100px;

  margin:10px;

}


<svg xmlns="http://www.w3.org/2000/svg">

<defs>

      <linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse">

         <stop stop-color="#9c20aa" offset="0"/>

         <stop stop-color="#fb3570" offset="1"/>

      </linearGradient>

   </defs>

  <rect x="5" y="5" height="100%" width="100%" style="width:calc(100% - 10px);height:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/>

</svg>

That you can apply as background:

.white-grad {

    background:url('data:image/svg+xml;utf8,<svg   xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>');

    color: #313149;

    padding:25px;

    border-radius:15px;

    display:inline-block;

    margin: 75px 0;

}



body {

  background:yellow;

}


<div class="white-grad"> Some text here</div>



<div class="white-grad"> text very loooooooooooong here</div>

You can also use it as common element and consider position:absolute to
place it around the text:

.white-grad {

  color: #313149;

  padding: 25px;

  border-radius: 15px;

  display: inline-block;

  margin: 75px 0;

  position:relative;

  z-index:0;

}

.white-grad > svg {

  position:absolute;

  top:0;

  left:0;

  height:100%;

  width:100%;

  z-index:-1;

}



body {

  background: yellow;

}



.hide {

 height:0;

 width:0;

}


<svg class="hide" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" id="border" style="height:calc(100% - 10px);width:calc(100% - 10px)" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg>





<div class="white-grad">

<svg xmlns="http://www.w3.org/2000/svg">

  <use href="#border" />

</svg>

Some text here</div>



<div class="white-grad">

<svg xmlns="http://www.w3.org/2000/svg">

  <use href="#border" />

</svg>

text very loooooooooooong here</div>

Here is a different and complex idea with CSS using mask where you will have
transparency and it will also be responsive:

.white-grad {

  color: #313149;

  padding: 10px;

  display: inline-block;

  margin: 75px 0;

  position:relative;

  z-index:0;

}

.white-grad:before {

  content:"";

  position:absolute;

  z-index:-1;

  top:0;

  left:0;

  right:0;

  bottom:0;

  border: 5px solid transparent;

  border-radius: 15px;

  background: linear-gradient(to right, #9c20aa, #fb3570) border-box;

  -webkit-mask:

    radial-gradient(farthest-side at bottom left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top     right/15px 15px,

    radial-gradient(farthest-side at top right   ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom  left /15px 15px,

    radial-gradient(farthest-side at top left    ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom  right/15px 15px,

    radial-gradient(farthest-side at bottom right,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top     left /15px 15px,

    linear-gradient(#fff,#fff) top   /100% 5px,

    linear-gradient(#fff,#fff) bottom/100% 5px,

    linear-gradient(#fff,#fff) left  /5px 100%,

    linear-gradient(#fff,#fff) right /5px 100%;

  -webkit-mask-repeat:no-repeat;



  mask:

    radial-gradient(farthest-side at bottom left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top     right/15px 15px,

    radial-gradient(farthest-side at top right   ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom  left /15px 15px,

    radial-gradient(farthest-side at top left    ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom  right/15px 15px,

    radial-gradient(farthest-side at bottom right,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top     left /15px 15px,

    linear-gradient(#fff,#fff) top   /100% 5px,

    linear-gradient(#fff,#fff) bottom/100% 5px,

    linear-gradient(#fff,#fff) left  /5px 100%,

    linear-gradient(#fff,#fff) right /5px 100%;

  mask-repeat:no-repeat;

}


<div class="white-grad"> Some text here</div>



<div class="white-grad"> Some long long long text here</div>



<div class="white-grad"> Some long long <br>long text here</div>

CSS border radius with linear gradient

With CSS variables, we can make it easy to adjust:

.white-grad {

  --b:5px;  /* border width*/

  --r:15px; /* the radius */



  --g:transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px) 100%;

  color: #313149;

  padding: calc(var(--b) + 5px);

  display: inline-block;

  margin: 75px 0;

  position:relative;

  z-index:0;

}

.white-grad:before {

  content:"";

  position:absolute;

  z-index:-1;

  top:0;

  left:0;

  right:0;

  bottom:0;

  border: var(--b) solid transparent;

  border-radius: var(--r);

  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570)) border-box;

  -webkit-mask:

    radial-gradient(farthest-side at bottom left ,var(--g)) top     right/var(--r) var(--r),

    radial-gradient(farthest-side at top right   ,var(--g)) bottom  left /var(--r) var(--r),

    radial-gradient(farthest-side at top left    ,var(--g)) bottom  right/var(--r) var(--r),

    radial-gradient(farthest-side at bottom right,var(--g)) top     left /var(--r) var(--r),

    linear-gradient(#fff,#fff) top   /100% var(--b),

    linear-gradient(#fff,#fff) bottom/100% var(--b),

    linear-gradient(#fff,#fff) left  /var(--b) 100%,

    linear-gradient(#fff,#fff) right /var(--b) 100%;

  -webkit-mask-repeat:no-repeat;



  mask:

    radial-gradient(farthest-side at bottom left ,var(--g)) top     right/var(--r) var(--r),

    radial-gradient(farthest-side at top right   ,var(--g)) bottom  left /var(--r) var(--r),

    radial-gradient(farthest-side at top left    ,var(--g)) bottom  right/var(--r) var(--r),

    radial-gradient(farthest-side at bottom right,var(--g)) top     left /var(--r) var(--r),

    linear-gradient(#fff,#fff) top   /100% var(--b),

    linear-gradient(#fff,#fff) bottom/100% var(--b),

    linear-gradient(#fff,#fff) left  /var(--b) 100%,

    linear-gradient(#fff,#fff) right /var(--b) 100%;

  mask-repeat:no-repeat;

}



body {

  background:#f2f2f2;

}


<div class="white-grad"> Some text here</div>



<div class="white-grad" style="--r:20px;--b:10px;--c:linear-gradient(140deg,red,yellow,green)"> Some long long long text here</div>



<div class="white-grad"  style="--r:30px;--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"> Some long long <br>long text here</div>



<div class="white-grad"  style="--r:40px;--b:20px;--c:conic-gradient(black,orange,purple)"> Some long long <br>long text here<br> more and more more and more</div>
2020-05-16