邊框漸層與border-radius是否相容？

Question

我正在為具有圓角邊框（border-radius）的輸入框添加樣式，並嘗試為該邊框添加漸變效果。我可以成功地創建漸變和圓角邊框，但兩者不能同時生效。要么是有圓角但沒有漸變，要么是有漸變但沒有圓角。

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

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瀏覽器。

Answer 2

可能不可能，根據W3C規格：

這可能是因為border-image可以採用一些可能複雜的圖案。如果你想要一個圓形的圖像邊框，你需要自己創建一個。