模擬陰影效果純CSS圓角矩形

2021-08-30 16:04:04 字數 668 閱讀 9945

專案上需要個彈出選單,要求要陰影+圓角。。陰影不敢用png格式,客戶大多是使用ie6的,用濾鏡又不好控制。乾脆搞個純css的畫素圓角+陰影(模擬)吧,哈哈。

思路是這樣的:

bbox

**如下:

css.bbox

.bbox-t1,.bbox-t2,.bbox-b1,.bbox-b2

.bbox-t1

.bbox-t2

.bbox-offset

.bbox-body

.bbox-b2

.bbox-b1

.bbox-body *

/*邊框顏色*/

.bbox-t1,.bbox-b2

.bbox-t2,.bbox-body

/*背景顏色*/

.bbox-t2,.bbox-body

/*陰影顏色*/

.bbox-offset,.bbox-b1

.bbox-b2

/*---------------------------------*/

html

效果:就取名bbox吧~支援ie,firefox,chrome,其他的沒試過,替換顏色和呼叫還是相當方便的。本來想把背景顏色,邊框顏色,陰影顏色寫在一起,每次只要改3個地方就行,可是bbox-b2實在是太鬱悶了,搞不定,只能麻煩點,每次改6個地方了。

純CSS圓角矩形

這樣形成的圓角,是具備多種優勢的 1.無論是在橫向還是縱向上都保持著無限的擴充套件性。試著修改box的width content的height。2.沒有hack,且不易出現瀏覽器相容性問題。3.圓角顏色易自定義。4.圓角大小可自定義。試著將class box 的修改為class box2 5.圓角模...

純css圓角矩形

html 這樣形成的圓角,是具備多種優勢的 1.無論是在橫向還是縱向上都保持著無限的擴充套件性。試著修改box的width content的height。2.沒有hack,且不易出現瀏覽器相容性問題。3.圓角顏色易自定義。4.圓角大小可自定義。試著將class box 的修改為class box2 ...

iOS設定圓角矩形和陰影效果

1.設定圓角矩形 設定dropview屬性 dropview.backgroundcolor uicolor whitecolor colorwithalphacomponent 0.8 dropview.layer.cornerradius 8 dropview.layer.maskstoboun...