關於css3的陰影遮蓋問題的小研究

2021-09-19 04:48:47 字數 973 閱讀 5235

今日在寫乙個陰影效果的時候遇到了乙個小問題,不多說,上**

div
可以看到,下方的陰影總被遮擋,但如果我想要

這種效果應該怎麼實現呢

剛開始我想到的是z-index,是不是改一下z-index的值就可以正常顯示了呢,我們試試,將第二個div的z-index設為999

div 


div:nth-child(2)
結果這樣:

果然毫無效果,於是我嘗試使用在第二div後面加乙個::after,給他加乙個陰影,並且把原陰影去除,以便觀察

div 


div:nth-child(2)::after
結果如下

雖然陰影顯示出來了,但是還是被第三個div遮蓋,那如果把它絕對定位,抽離文字流試試呢

div 


div:nth-child(2)::after
確實有效果了,但是::after如果不設定高好像就無法顯示,但是思路來了,是不是因為position的原因呢,於是我馬上把所有的div都設定成relative,並且把第二個設定為z-index:999,看效果

div 


div:nth-child(2)
重新整理,哈,好了

那是不是當position為absolute的時候也一樣有效呢,試試

div 


div:nth-child(2) 


div:nth-child(3)
一樣可以

第一次寫文章,不專業的地方,輕噴~輕噴~~

css3的文字陰影和換行

1.文字陰影 text shadow 陰影比文字右移的px,陰影比文字下移的px,陰影的模糊距離px,陰影的顏色 用法 h1 2.word break 段落換行方式 值 word break normal 預設，使用瀏覽器預設換行方式 word break keep all 僅在段落的半形空格或連字...

css3的新屬性陰影屬性

css3的新屬性陰影屬性 box shadow ie9 firefox 4 chrome opera 以及 safari 5.1.1 支援 box shadow 屬性。語法是 box shadow h shadow v shadow blur spread color inset box shado...

CSS3陰影 box shadow的使用和技巧總結

text shadow是給文字新增陰影效果，box shadow是給元素塊新增周邊陰影效果。隨著html5和css3的普及，這一特殊效果使用越來越普遍。基本語法是 物件選擇器 box shadow屬性的引數設定取值 陰影型別 此引數可選。如不設值，預設投影方式是外陰影 如取其唯一值 inset 其投...