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