可以將邊框半徑與具有漸變的邊框圖像一起使用嗎？

Question

我正在設計一個具有圓形邊框（邊框半徑）的輸入字段，並嘗試在所述邊框添加漸變。我可以成功地製作漸層和圓形邊框，但是兩者都不能一起工作。它要么是沒有漸變的圓角，要么是帶有漸變但沒有圓角的邊框。

-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 擴充（即

過濾器，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 可以採用一些潛在的複雜模式。如果您想要圓形圖像邊框，則需要自行建立一個。