可以将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属性一起工作,还是这不可能？

Answer 1

这是可能的,它不需要额外的标记,但使用::after伪元素.

                                   

它涉及在下面放置一个带有渐变背景的伪元素并剪切它.这适用于所有当前浏览器,没有供应商前缀或黑客(甚至IE),但如果你想支持IE的复古版本,你应该考虑纯色回退,javascript和/或自定义MSIE CSS扩展(即filter,CSSPie-像矢量欺骗等).

这是一个实例(jsfiddle版本):

@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');

html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

.grounded-radiants::after {
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}

<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.
</p>

上面的额外造型是为了显示:

• 这适用于任何背景
• 无论是否适用box-shadow,它都能正常工作inset
• 不要求您将阴影添加到伪元素

同样,这适用于IE,Firefox和Webkit/Blink浏览器.

Answer 2

根据W3C规范,可能不可能:

框的背景,但不是其边框图像,被剪切到适当的曲线(由'background-clip'确定).剪切到边框或填充边缘的其他效果(例如"溢出"除"可见"之外)也必须剪切到曲线.替换元素的内容始终被修剪为内容边缘曲线.此外,边界边缘曲线外的区域不代表元素接受鼠标事件.

这可能是因为可能border-image会采取一些潜在的复杂模式.如果你想要一个圆形的图像边框,你需要自己创建一个.

Answer 3

在解决同一问题时，遇到了一个非SVG解决方案，该解决方案比此处的其他解决方案更为简洁：

.rounded-color-border-element{
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

这不是我自己的解决方案，已从此处获取：https : //gist.github.com/stereokai/36dc0095b9d24ce93b045e2ddc60d7a0

Answer 4

现在我们可以使用掩码轻松实现这一点，同时具有透明度和响应能力

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

更多详情：https : //dev.to/afif/border-with-gradient-and-radius-387f

Answer 5

我会为此使用 SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="100%" height="100%" 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>

SVG 可以用作单独的文件（首选方式）或类似值的一部分background（下面的代码仅适用于 webkit 浏览器）：

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%" height="100%" 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>');
}

<div></div>

对于这个在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>