<p>我正在设计一个具有圆形边框（边框半径）的输入字段，并尝试向所述边框添加渐变。我可以成功地制作渐变和圆形边框，但是两者都不能一起工作。它要么是没有渐变的圆角，要么是带有渐变但没有圆角的边框。</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
970
收藏
这是可能的，并且它不需要额外的标记，但使用
::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 浏览器。
根据 W3C 规范，可能不可能：
这可能是因为
border-image可以采用一些潜在的复杂模式。如果您想要圆形图像边框，则需要自己创建一个。