Ich gestalte ein Eingabefeld mit einem abgerundeten Rand (Rahmenradius) und versuche, dem Rand einen Verlaufseffekt hinzuzufügen. Ich kann erfolgreich Farbverläufe und abgerundete Ränder erstellen, aber nicht beides gleichzeitig. Entweder gibt es abgerundete Ecken, aber keinen Farbverlauf, oder es gibt einen Farbverlauf, aber keine abgerundeten Ecken.
-webkit-border-radius: 5px; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100 %, from(#b0bbc4), to(#ced9de)) 1 100 %;
Gibt es eine Möglichkeit, diese beiden CSS-Eigenschaften gleichzeitig wirksam werden zu lassen, oder ist dies nicht möglich?
这是可能的，并且不需要额外的标记，而是使用了一个
::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; }上面的额外样式是为了展示：
box-shadow一起工作得很好，无论是否使用inset再次强调，这适用于IE、Firefox和Webkit/Blink浏览器。
可能不可能，根据W3C规范：
这可能是因为
border-image可以采用一些可能复杂的图案。如果你想要一个圆形的图像边框，你需要自己创建一个。