Kann ich den Randradius bei Randbildern mit Farbverläufen verwenden?

Question

Ich entwerfe ein Eingabefeld mit einem kreisförmigen Rand (Randradius) und versuche, diesem Rand einen Farbverlauf hinzuzufügen. Ich kann erfolgreich Farbverläufe und kreisförmige Ränder erstellen, aber beides funktioniert nicht zusammen. Es handelt sich entweder um abgerundete Ecken ohne Farbverlauf oder um einen Rand mit Farbverlauf, aber ohne abgerundete 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, zwei CSS-Eigenschaften zusammenarbeiten zu lassen, oder ist dies nicht möglich?

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 可以采用一些潜在的复杂模式。如果您想要圆形图像边框，则需要自己创建一个。