如何在 CSS 中建立凹形邊框效果？

使用漸變創建凹面效果

在 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中文網其他相關文章！