Можно ли использовать border-radius вместе с border-image с градиентом?

Question

Я задаю стиль для поля ввода с закругленной границей (border-radius) и пытаюсь добавить градиент к указанной границе. Я могу успешно сделать градиент и закругленную границу, но ни то, ни другое не работают вместе. Он либо закруглен без градиента, либо граница с градиентом, но без закругленных углов.

-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

Есть ли способ, чтобы оба свойства CSS работали вместе, или это невозможно?

_{Свободный перевод вопроса Possible to use border-radius together with a border-image which has a gradient? от участника @paulwilde.}

Answer 1

Работаем над той же проблемой. Наткнулся на решение без svg, которое более лаконично, чем другие здесь:

div{
  width: 300px;
  height: 80px;
  border: double 1em transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, green, gold);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div></div>

Это не мое собственное решение, оно взято отсюда

_{Свободный перевод ответа от участника @alphazwest.}

Answer 2

Теперь мы можем использовать маску, чтобы легко добиться этого, сохраняя при этом прозрачность и отзывчивость.

.box {
  position:relative;
  padding:20px 30px;
  margin:5px;
  display:inline-block;
  font-size:30px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:50px; 
  padding:10px; 
  background:linear-gradient(45deg,red,blue); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; 
  mask-composite: exclude; 
}

<div class="box">
  Hello World
</div>

<div class="box">
  Hello World again
</div>
<div class="box">
  Hello World <br> two lines
</div>

Более подробно в этом ответе

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

Answer 3

Я бы использовал для этого SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="50%" height="50%" preserveAspectRatio="none">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0" style="stop-color:#0070d8" />
      <stop offset="0.5" style="stop-color:#2cdbf1" />
      <stop offset="1" style="stop-color:#83eb8a" />
    </linearGradient>
  </defs>
  <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" />
</svg>

Чтобы это работало в MS Edge и Firefox, мы должны избегать нашей разметки после utf8, поэтому мы заменим двойные кавычки «одинарными кавычками», # => на %23 и
% => на %25:

div {
  width: 250px;
  height: 250px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' width='100%25' height='100%25' preserveAspectRatio='none'><defs><linearGradient id='gradient'><stop offset='0' style='stop-color:%230070d8' /><stop offset='0.5' style='stop-color:%232cdbf1' /><stop offset='1' style='stop-color:%2383eb8a' /></linearGradient></defs><ellipse ry='100' rx='100' cy='110' cx='110' style='fill:none;stroke:url(%23gradient);stroke-width:6;' /></svg>");
  background-size: 100% 100%; /* Fix for Fifefox image scaling */
}

<div></div>

_{Свободный перевод ответа от участника @Vadim Ovchinnikov.}

БЛОГ НА HUSL

Можно ли использовать border-radius вместе с border-image с градиентом?

Ответы (3 шт):