可以将边框半径与具有渐变的边框图像一起使用吗？

Question

我正在设计一个具有圆形边框（边框半径）的输入字段，并尝试向所述边框添加渐变。我可以成功地制作渐变和圆形边框，但是两者都不能一起工作。它要么是没有渐变的圆角，要么是带有渐变但没有圆角的边框。

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

无论如何，有没有办法让两个 CSS 属性一起工作，或者这是不可能的？

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>

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

Answer 2

这是可能的，并且它不需要额外的标记，但使用::after 伪元素。

                    sp;           

它涉及放置一个伪- 下面带有渐变背景的元素并对其进行剪裁。这适用于所有当前没有供应商前缀或 hack 的浏览器（甚至 IE），但如果您想支持 IE 的复古版本，您应该考虑纯色后备、javascript 和/或自定义 MSIE CSS 扩展（即 过滤器，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 或不
• 不需要您将阴影添加到伪-element

同样，这适用于 IE、Firefox 和 Webkit/Blink 浏览器。

Answer 3

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

.box {
  position: relative;
  padding: 20px 30px;
  margin: 5px;
  display: inline-block;
  font-size: 30px;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 10px; /* control the border thickness */
  background: linear-gradient(45deg, red, blue);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

<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-渐变和半径-387f

Answer 4

根据 W3C 规范，可能不可能：

盒子的背景，但不是它的背景
边框图像，被剪裁到
适当的曲线（由下式确定）
“背景剪辑”）。其他影响
剪辑到边框或填充边缘
（例如“溢出”，除了
'visible'）也必须剪辑到
曲线。替换的内容
元素总是被修剪到
内容边缘曲线。另外，该地区
边界边缘曲线之外
不代表接受鼠标事件
元素的。

这可能是因为 border-image 可以采用一些潜在的复杂模式。如果您想要圆形图像边框，则需要自己创建一个。

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>

Answer 6

对我来说，这个可以快速帮助我，

.border_linear_btn {
    width: 300px;
    height: 100px;
    margin: 2rem;
    border: solid 5px transparent;
    border-radius: 50px;
    background:
        linear-gradient( #050C35, #050C35) padding-box,
        linear-gradient(92.7deg, #0064fb, red) border-box;
}

<div class="border_linear_btn"> </div>

Answer 7

这在 WebKit 中总是对我有用，尽管它有点棘手！

基本上，您只需使边框变大，然后用更大或更小的伪元素边框将其遮盖即可:)。

.thing {
  display: block;
  position: absolute;
  left: 50px;
  top: 50px;
  margin-top: 18pt;
  padding-left: 50pt;
  padding-right: 50pt;
  padding-top: 25pt;
  padding-bottom: 25pt;
  border-radius: 6px;
  font-size: 18pt;
  background-color: transparent;
  border-width: 3pt;
  border-image: linear-gradient(#D9421C, #E8A22F) 14% stretch;
}
.thing::after {
  content: '';
  border-radius: 8px;
  border: 3pt solid #fff;
  width: calc(100% + 6pt);
  height: calc(100% + 6pt);
  position: absolute;
  top: -6pt;
  left: -6pt;
  z-index: 900;
}
.thing::before {
  content: '';
  border-radius: 2px;
  border: 1.5pt solid #fff;
  width: calc(100%);
  height: calc(100% + 0.25pt);
  position: absolute;
  top: -1.5pt;
  left: -1.5pt;
  z-index: 900;
}

http://plnkr.co/edit/luO6G95GtxdywZF0Qxf7?p=preview

Answer 8

透明元素的解决方案：
至少可以在 Firefox 中工作。

实际上我发现了一种没有伪类的方法 - 但它只适用于径向渐变：

body {
  background: linear-gradient(white, black), -moz-linear-gradient(white, black), -webkit-linear-gradient(white, black);
  height: 300px;
  
  }

div{
text-align: center;
  width: 100px;
  height: 100px;
  font-size:30px;
  color: lightgrey;
  border-radius: 80px;
  color: transparent;
  background-clip: border-box, text;
  -moz-background-clip: border-box, text;
  -webkit-background-clip: border-box, text;
  background-image: radial-gradient(circle,
      transparent, transparent 57%, yellow 58%, red 100%), repeating-linear-gradient(-40deg, yellow,
  yellow 10%, orange 21%, orange 30%, yellow 41%);
  line-height: 100px;
}

<body>
<div class="radial-gradient"> OK </div>
</body>

获取带有伪类的透明元素我只发现了这种方式 - 好吧，它不是渐变，但它至少是一个彩色条纹边框（看起来像救生圈）：

body {
  background: linear-gradient(white, black, white);
  height: 600px;
  }

div{
  position: absolute;
  width: 100px;
  height: 100px;
  font-size:30px;
  background-color:transparent;
  border-radius:80px;
  border: 10px dashed orange;
  color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  background-image: repeating-linear-gradient(-40deg, yellow,
  yellow 10%, orange 11%, orange 20%, yellow 21%);
  text-align:center;
  line-height:100px;
}


div::after {
    position: absolute;
    top: -10px; bottom: -10px;
    left: -10px; right: -10px;
    border: 10px solid yellow;
    content: '';
    z-index: -1;
    border-radius: 80px;
    }

<body>
<div class="gradient"> OK </div>
</body>

使用 svg （在可变性方面最令人满意，但也需要大多数代码行）：

body{
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  display: flex;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  line-height: 105px;
  font-size:40px;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  background-image: repeating-linear-gradient(-40deg, yellow,
  yellow 10%, orange 11%, orange 20%, yellow 21%);
  color: transparent;
}

svg {
  fill: transparent;
  stroke-width: 10px; 
  stroke:url(#gradient);
  
}

<head>

</head>
<body>

<div>
<span>OK</span>
  <svg>
    <circle class="stroke-1" cx="50%" cy="50%" r="50"/>
    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="15%" gradientTransform="rotate(-40)" spreadMethod="reflect">
       
        <stop offset="0%" stop-color="orange" />
        <stop offset="49%" stop-color="orange" />
        <stop offset="50%" stop-color="yellow" />
        <stop offset="99%" stop-color="yellow" />

      </linearGradient>
  </defs>
  </svg>
  

</div>

</body>

Answer 9

如果将渐变应用到背景会怎样？然后在里面添加一个额外的 div，将边距设置为旧的边框宽度并使用白色背景，当然还有边框半径。这样你就有了边框的效果，但实际上使用的是正确裁剪的背景。

Answer 10

您可以使用 CSS 剪辑路径属性。

.rounded-border-image {
    --border-image: linear-gradient(to bottom, orange, skyblue, magenta);
    --border-radius: 4px;
    background-image: var(--border-image);
    background-origin: border-box;
    border-color: transparent;
    border-radius: var(--border-radius);
    border-style: solid;
    border-width: 4px;
    clip-path: inset(0% 0% 0% 0% round var(--border-radius));
}

当在普通、红色、40x40 图像的 img 元素周围使用时，它看起来像这样。

.rounded-border-image {
    --border-image: linear-gradient(to bottom, orange, skyblue, magenta);
    --border-radius: 4px;
    background-image: var(--border-image);
    background-origin: border-box;
    border-color: transparent;
    border-radius: var(--border-radius);
    border-style: solid;
    border-width: 4px;
    clip-path: inset(0% 0% 0% 0% round var(--border-radius));
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAN0lEQVR42u3OQQ0AAAjEMM6/aMAECY8uE9B01f63AAICAgICAgICAgICAgICAgICAgICAgIC3jTyeE/ZxiLJ7wAAAABJRU5ErkJggg==" class="rounded-border-image">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAN0lEQVR42u3OQQ0AAAjEMM6/aMAECY8uE9B01f63AAICAgICAgICAgICAgICAgICAgICAgIC3jTyeE/ZxiLJ7wAAAABJRU5ErkJggg==" class="rounded-border-image" style="--border-radius: 16px;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAN0lEQVR42u3OQQ0AAAjEMM6/aMAECY8uE9B01f63AAICAgICAgICAgICAgICAgICAgICAgIC3jTyeE/ZxiLJ7wAAAABJRU5ErkJggg==" class="rounded-border-image" style="--border-radius: 40px;">

希望这有帮助！

Answer 11

根据这个页面，可以使用「clip-path」 」

#example-card{
  width: 200px;
  height: 200px;
  border: 20px solid hsl(80 100% 50%);
  border-image-slice: 1;

  border-image-source: conic-gradient(
    from 0deg,
    hsl(80 100% 50%), 
    hsl(200 100% 60%),
    hsl(80 100% 50%)
  );

  clip-path: inset(0 round 24px);
}

<div id="example-card">EXAMPLE</div>

Answer 12

渐变边框的解决方案。

这段代码对我来说工作得很好！

div#id123::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 31px;
    padding: 3px;
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, rgba(235,163,225,1) 0%, rgba(228,161,228,1) 13%, rgba(163,99,233,1) 47%, rgba(212,129,166,1) 62%, rgba(237,172,70,1) 89%, rgba(255,57,250,0.8733377659574468) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

<div id = "id123">
<div class="" id="" data-de-type="input" data-title="input" data-delay="500" type="name" style="margin-top: 10px; outline: none; cursor: pointer; font-family: Nunito, Helvetica, sans-serif !important;" aria-disabled="false" data-google-font="Nunito">
<input type="name" placeholder="Enter Full Name" name="name" class="" data-type="extra">
</div>
<div class="" id="" data-de-type="input" data-title="input" data-delay="500" type="name" style="margin-top: 10px; outline: none; cursor: pointer; font-family: Nunito, Helvetica, sans-serif !important;" aria-disabled="false" data-google-font="Nunito">
<input type="name" placeholder="Enter Full Name" name="name" class="" data-type="extra">
</div>
<div class="" id="" data-de-type="input" data-title="input" data-delay="500" type="name" style="margin-top: 10px; outline: none; cursor: pointer; font-family: Nunito, Helvetica, sans-serif !important;" aria-disabled="false" data-google-font="Nunito">
<input type="name" placeholder="Enter Full Name" name="name" class="" data-type="extra">
</div>
</div>