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

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

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

---

是否有两个CSS属性可以一起工作，或者这是不可能的？

根据W3C规范，这可能是不可能的：

一个盒子的背景，但不是它的 边框图像，被剪裁到 适当的曲线（由 “背景剪辑”）。其他影响 剪裁到边框或填充边 （例如“溢出”而不是 “可见”）也必须剪辑到 曲线。被替换的内容 元素始终修剪为最短的长度 内容边曲线。此外，该地区 在边界边的曲线之外 不代表接受鼠标事件 元素的属性

---

这可能是因为

边框图像

可能采用一些潜在的复杂模式。如果你想要一个圆形的图像边框，你需要自己创建一个。

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

这在WebKit中对我来说总是有效的，尽管有点棘手

基本上，您只需将边框变大，然后用越来越大和越来越小的伪元素边框将其遮住：）

这是可能的，它不需要额外的标记，而是使用一个

它包括在下面放置一个带有渐变背景的伪元素，并对其进行剪裁。这在所有没有浏览器前缀或黑客（甚至IE）的当前浏览器中都是有效的，但是如果你想支持IE的老式版本，你应该考虑纯色回退、JavaScript和/或自定义MSIE-CSS扩展（即CSSPIE矢量欺骗等）。 下面是一个实例（）：

导入url（'//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css'）； html{ /*只是为了显示背景不需要是实心的*/ 背景：线性梯度（向右，DDD0%，FFF50%，DDD100%）； 填充：10px； } .接地辐射{ 位置：相对位置； 边框：4px实心透明； 边界半径：16px； 背景：线性梯度（橙色、紫色）； 背景剪辑：填充框； 填充：10px； /*只是为了显示方块阴影仍然可以正常工作*/ 盒影：0 3px 9px黑色，嵌入0 0 9px白色； } .接地辐射：：之后{ 位置：绝对位置； 顶部：-4px；底部：-4px； 左：-4px；右：-4px； 背景：线性梯度（红色、蓝色）； 内容：''； z指数：-1； 边界半径：16px； }

这里有一些文字。

甚至还有断线

太酷了。

我将使用SVG实现这一点：

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

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


正文{
背景：线性梯度（白色，黑色），-moz线性梯度（白色，黑色），-webkit线性梯度（白色，黑色）；
高度：300px；
}
div{
文本对齐：居中；
宽度：100px；
高度：100px；
字体大小：30px；
颜色：浅灰色；
边界半径：80px；
颜色：透明；
背景剪辑：边框框，文本；
-moz背景剪辑：边框框，文本；
-webkit背景剪辑：边框框，文本；
背景图像：径向梯度（圆形，
透明，透明57%，黄色58%，红色100%），重复线性梯度（-40度，黄色，
黄色10%，橙色21%，橙色30%，黄色41%；
线高：100px；
}

好啊
正在处理相同的问题。在这里遇到了一个比其他解决方案更简洁的非svg解决方案：


div{
宽度：300px；
高度：80px；
边框：双1米透明；
边界半径：30px；
背景图像：线性渐变（白色，白色），
线性渐变（向右、绿色、金色）；
背景来源：边框框；
背景剪辑：内容框、边框框；
}
答案很简单：要有彩色的、弯曲的边框，我们首先需要有一个弯曲的背景。然后您的问题将得到解决（没有梯度情况）：

按钮顺序{
-fx边框颜色：红色；
-背景色：白色；
-背景半径：30；
-外汇边界半径：30；
}
现在我们可以使用mask轻松实现这一点，同时具有透明度和响应能力


.box{
位置：相对位置；
填充：20px 30px；
保证金：5px；
显示：内联块；
字体大小：30px；
}
.box：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
边界半径：50px；
填充：10px；
背景：线性梯度（45度，红色，蓝色）；
-网络工具包掩码：
线性渐变（#fff 0）内容框，
线性梯度（#fff 0）；
-webkit掩码复合：目标输出；
面具组合：排除；
}

你好，世界
再次向世界问好
你好世界
两行
是的，我认为这是不可能的，但我只是想确定一下。想象一下。格本在他的答案中有一个潜在的解决办法，尽管它确实添加了一些额外的标记。我觉得这听起来像是胡说八道。浏览器可以计算（遮罩和颜色）边界半径：10px；边框顶部：10px点蓝色；左边框：4个绿色凹槽；但是他们不能在边界图像上应用相同的遮罩？这个问题已经有6年历史了。虽然它仍然不是规范AFAIK的一部分（因此，即使浏览器可以，它们也可能不会），但事情并不是这样的
.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;
}