如何在 CSS 中建立半透明邊框？

如何在CSS中建立半透明邊框

在CSS中，設定opacity屬性會影響整個元素的透明度，包括其文字。對於建立半透明邊框，沒有直接的方法可用。然而，rgba 顏色格式可以讓您實現這種效果。

例如，以下程式碼設定 50% 不透明的紅色邊框：

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

對於不支援 rgba 的瀏覽器（IE8及更早版本），雙邊邊框策略是必要的。第一個邊框設定為假不透明度，而第二個邊框表示實際所需的不透明度：

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

第一個邊框模擬白色上50% 不透明的紅色邊框，在大多數瀏覽在器上創建所需的效果。

為了確保邊框即使在純色背景下也保持透明，請添加background-clip: padding-box;如上面的例子所示。

以上是如何在 CSS 中建立半透明邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！