边框渐变与border-radius是否兼容？

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伪元素。

                                   

它涉及在下方放置一个带有渐变背景的伪元素，并对其进行裁剪。这在所有当前浏览器中都可以工作，无需供应商前缀或hack（甚至是IE），但如果您想要支持旧版本的IE，您应该考虑使用纯色回退、javascript和/或自定义的MSIE CSS扩展（即filter，类似CSSPie的矢量技巧等）。

这是一个实时示例（jsfiddle版本）：

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

html {
    /* 仅用于显示背景不需要是纯色的 */
    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;
    /* 仅用于显示box-shadow仍然正常工作 */
    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">
    这里有一些文本。<br/>
    这里甚至有一个换行！<br/>
    太酷了。
</p>

上面的额外样式是为了展示：

• 这适用于任何背景
• 它与box-shadow一起工作得很好，无论是否使用inset
• 不需要您将阴影添加到伪元素中

再次强调，这适用于IE、Firefox和Webkit/Blink浏览器。

Answer 2

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

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