仿微博半透明邊框

2022-09-05 03:00:14 字數 364 閱讀 2874

內容區

我的思路是這樣的,#box先相對定位,以便#alpha_bg可以絕對定位,但你會發現 ,這樣做有個問題,好像整個box都無法選擇文字了。

原因就是#alpha_bg位於#content之上,至於為什麼跑到它上面去了,我也不甚清楚,希望高人指點一二。

解決辦法很簡單,既然是層級問題,自然用到z-index,但這個屬性有個前提,目標元素必須設定了position: relative/absolute/fixed三者之一,即不能是預設值就行。

最終版

內容區

這只是一種方式,還有一種是div外套一層div,外層div設定半透明圓角背景,再給個padding就哦了

半透明邊框

相信大家以前都是用過css的半透明顏色,比如rgba 和hsla 但在一些屬性 比如邊框 中使用半透明顏色並沒有想象中那麼容易。我們接下來會看的 假設我們想給乙個容器設定乙個白色的背景和一道半透明的白色邊框,body的背景會從半透明的邊框透過來。我們最開始的嘗試可能是醬子的 1 test 結果如圖所...

《CSS揭秘》半透明邊框

效果展示 展示 doctype html en utf 8 viewport content width device width,initial scale 1.0 半透明邊框 title body div style head 我有乙個半透明的邊框呦 div body html 預設情況下,背景...

CSS揭秘 半透明邊框

技巧 實現乙個半透明的邊框 預備知識background clip background clip 設定元素背景是否延伸到邊框下面,如果沒有設定背景顏色或者,那麼這個屬性只有在邊框設定為透明或者半透明時才能看到視覺效果。否則這個屬性造成的樣式變化會被元素邊框所覆蓋。預設值為 border box 沒...