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

Question

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

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

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

Answer 1

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

                                  

它涉及在下面放置一个带有渐变背景的伪元素并对其进行裁剪。这适用于所有当前没有供应商前缀或 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 一起使用都可以正常工作
• 不需要您向伪元素添加阴影

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

Answer 2

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

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