可以將邊框半徑與具有漸變的邊框圖像一起使用嗎？
P粉633733146
2023-08-29 12:52:01
<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>
這是可能的，而且它不需要額外的標記，但使用
::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
不需要您為偽元素添加陰影-
同樣，這適用於 IE、Firefox 和 Webkit/Blink 瀏覽器。、inset一起使用都可以正常運作根據 W3C 規範，可能不可能：
這可能是因為
border-image可以採用一些潛在的複雜模式。如果您想要圓形圖像邊框，則需要自行建立一個。