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

Question

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

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

有没有办法让两个 CSS 属性一起工作，或者这不可能？

原文由 paulwilde 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

一个盒子的背景，但不是它的边框图像，被剪裁到适当的曲线（由’background-clip’确定）。剪辑到边框或填充边缘的其他效果（例如“溢出”而不是“可见”）也必须剪辑到曲线。被替换元素的内容总是被修剪到内容边缘曲线。此外，边框边缘曲线之外的区域不代表元素接受鼠标事件。

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

原文由 Shauna 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

它涉及在下方放置一个具有渐变背景的伪元素并对其进行剪裁。这适用于所有当前没有供应商前缀或 hack 的浏览器（甚至 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 浏览器。

原文由 Camilo Martin 发布，翻译遵循 CC BY-SA 3.0 许可协议