<p>我正在为一个具有圆角边框（border-radius）的输入框添加样式，并尝试为该边框添加渐变效果。我可以成功地创建渐变和圆角边框，但两者不能同时生效。要么是有圆角但没有渐变，要么是有渐变但没有圆角。</p>
<pre class="brush:php;toolbar:false;">-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;</pre>
<p>是否有办法让这两个CSS属性同时生效，或者这是不可能的？</p>
2
1011
收藏
这是可能的，并且不需要额外的标记，而是使用了一个
::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浏览器。
可能不可能，根据W3C规范：
这可能是因为
border-image可以采用一些可能复杂的图案。如果你想要一个圆形的图像边框，你需要自己创建一个。