使用漸變創建凹面效果
在 CSS 中，border-radius 是向元素邊緣添加曲線的強大工具。然而，它僅限於創建凸形邊界，即曲線向外凸出。如果您想要一個凹形邊框（曲線向內傾斜）怎麼辦？
範例：凸形邊框
<code class="css">#test {
width: 200px;
height: 200px;
background: #888888;
border-radius: 50px;
}</code>嘗試的解決方案
要建立凹形邊框，您可以建立凹形邊框，您可以嘗試使用負值的邊框半徑。但是，這種方法在 CSS 中不起作用。
解決方案：徑向漸層
雖然無法單獨使用 CSS 建立真正的凹形邊框，但可以模擬使用徑向漸變的效果。漸變允許您在顏色之間創建平滑的過渡，並且透過使用多個漸變，您可以創建彎曲邊緣的錯覺。
考慮以下範例：
<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>此 CSS 建立了兩個重疊形成凹邊緣的徑向漸層。第一個漸層以 -20% 的透明圓圈開始，並在 100% 時過渡到純色 #888888。第二個漸變的效果相同，但從 120% 開始。
以上是如何在 CSS 中建立凹形邊框效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
