以逗號分割列表來描述乙個或多個陰影效果,可以用到幾乎任何元素上。 如果元素同時設定了 border-radius ,陰影也會有圓角效果。多個陰影時和多個 text shadows 規則相同(第乙個陰影在最上面)。
預設值: none 不可繼承
值:
inset
預設陰影在邊框外。
使用inset後,陰影在邊框內。
這是頭兩個 值,用來設定陰影偏移量。
設定水平偏移量,如果是負值則陰影位於元素左邊。
設定垂直偏移量,如果是負值則陰影位於元素上面。
如果兩者都是0,那麼陰影位於元素後面。
這時如果設定了或則有模糊效果。
這是第三個 值。值越大,模糊面積越大,陰影就越大越淡。
不能為負值。預設為0,此時陰影邊緣銳利。
這是第四個 值。取正值時,陰影擴大;取負值時,陰影.收縮。預設為0,此時陰影與元素同樣大。
陰影顏色,如果沒有指定,則由瀏覽器決定
box-shadow: 顏色 x軸偏移量 y軸偏移量 模糊大小;
box-shadow: black 10px 10px 10px;
多層陰影
box-shadow: 顏色 x軸偏移量 y軸偏移量 模糊大小,顏色 x軸偏移量 y軸偏移量 模糊大小;
box-shadow: black 10px 10px 10px,pink 20px 20px 10px;
示例:
效果: 盒模型與盒子陰影
對所有的盒子在瀏覽器中所佔據的空間進行計算 只要在瀏覽器中 佔據位置 的html元素,都是我們計算的盒子。寬度 width 高度 height 內邊距 padding 邊框 border width 外邊距 margin 盒子分類 邊框盒子 ie預設 和內容盒子 谷歌預設 邊框盒子在瀏覽器中佔據空間...
多選框樣式更改,盒模型陰影
以前的單選框的樣式都很普通,不太好看 所以就有了css樣式的改進,可以通過加乙個span標籤,對它進行更改,就可以調整單選框的樣式。當然了就要把原來input上的單選框樣式利用絕對定位的方法,移動到 left大數值,就可以隱藏看不出來了。下面是乙個自製的單選框樣式 性別 女 男 span 它的方法和...
邊框圓角 盒陰影
普通邊框border 5px solid red border bottom 30px solid red border top color red solid 實線 dotted 圓點線 dashed 虛線 border是對四條邊的3個屬性 width style color 進行設定,也可以指定...