5

У меня есть следующий 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;
} 

Добавление border-radius: 5px, похоже, ничего не изменяет.
Может это происходит потому что, я использую градиент border.
Есть ли способ вообще достичь желаемого радиуса border 5px?

Свободный перевод вопроса Border Gradient with Border Radius от участника @nsilva.

1

1 ответ 1

4

Вы не можете использовать border-radius с градиентом.

  • Вот еще одна идея, в которой вы можете использовать несколько фонов и настраивать 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>

  • Вы также можете применить в качестве фона:

.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>

  • И так же использовать маску, где вы можете получить градиент за пределами SVG:

.white-grad {
  color: #313149;
  padding: 25px;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
  background-size:0 0;
  position: relative;
  z-index: 0;
}

.white-grad::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:inherit;
  background-size:auto;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" ><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="white"/></svg>') 0 / 100% 100%;
          mask: url('data:image/svg+xml;utf8,<svg  xmlns="http://www.w3.org/2000/svg" ><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="white"/></svg>') 0 / 100% 100%;
}

body {
  background: yellow;
}
<div class="white-grad" style="background-image:linear-gradient(to right,blue,red)"> Some text here</div>

<div class="white-grad" style="background-image:linear-gradient(black,lightblue,green)"> text very loooooooooooong here</div>

<div class="white-grad" style="background-image:radial-gradient(blue,pink)"> text very<br> loooooooooooong here</div>

введите сюда описание изображения

  • Вы также можете использовать его как общий элемент и рассмотреть position: absolute, чтобы разместить его вокруг текста:

.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>

  • Вот другая, сложная идея с CSS, с использованием маски и нескольких фонов, где у вас будет прозрачность, а также она будет отзывчивой:

.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 мы можем упростить настройку:

.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>

введите сюда описание изображения

Связанный вопрос, чтобы получить другой эффект: How do you apply a gradient from outer to inner, only to borders, in CSS?


  • Приведенные выше примеры охватывают форму круга, но мы можем рассмотреть более простой код для получения градиента по кругу:

.white-grad {
  --b:5px;  /* border width*/

  color: #313149;
  display: inline-block;
  margin: 10px;
  width:150px;
  position:relative;
  z-index:0;
}
.white-grad:after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b)));
  border-radius:50%;
}

body {
  background:#f2f2f2;
}
<div class="white-grad"></div>

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

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

<div class="white-grad"  style="--b:20px;--c:conic-gradient(black,orange,purple)"></div>

Свободный перевод ответа от участника @Temani Afif.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.