14 盒模型陰影box shadow

2021-10-24 04:57:55 字數 1026 閱讀 6137

以逗號分割列表來描述乙個或多個陰影效果,可以用到幾乎任何元素上。 如果元素同時設定了 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 進行設定,也可以指定...