CSS border-radius 的靈活性允許創建各種邊框樣式。雖然凸邊界很容易實現，但問題出現了：凹邊界半徑可能嗎？
初步嘗試透過使用 border-radius 的負值來建立凹邊界半徑無果而終。這種無能力源自於邊界半徑的本質，邊界半徑本質上代表了從邊緣向外延伸的曲線。
雖然使用傳統邊框無法實現真正的凹圓形邊框-僅憑半徑，就可以透過巧妙地使用徑向漸變來產生凹面的錯覺。
考慮以下範例：
<code class="css">#test {
width: 200px;
height: 200px;
background: #888888;
background:
radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
background-size:100px 200px, 100px 200px;
background-position:0 0,100% 0;
background-repeat:no-repeat;
}</code>此技術建立兩個徑向漸層：一個位於左邊緣和右邊緣。漸變從透明逐漸褪色到背景顏色，給人一種向內彎曲邊框的錯覺。
需要注意的是，徑向漸層需要供應商前綴才能與舊版本相容瀏覽器。例如，Webkit 瀏覽器需要以下前綴：
<code class="css">background: -webkit-radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px), -webkit-radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);</code>
透過將徑向漸層與仔細定位結合，您可以建立凹形邊框半徑的印象，為您的網頁設計添加一絲維度。
以上是你能用 CSS 創造凹形邊框半徑嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
