多選框樣式更改,盒模型陰影

2021-08-19 00:11:45 字數 1425 閱讀 7098

以前的單選框的樣式都很普通,不太好看

所以就有了css樣式的改進,可以通過加乙個span標籤,對它進行更改,就可以調整單選框的樣式。當然了就要把原來input上的單選框樣式利用絕對定位的方法,移動到-left大數值,就可以隱藏看不出來了。

下面是乙個自製的單選框樣式:

性別:女	

span

它的方法和單選框的相同。

下面是乙個自製的多選框樣式:

愛好:

打球 看電視

逛街

語法:box-shadow:[inset] x y blur [spread] color

[inset]:投影方式,預設為外投影,inset表示內投影;

x元素:是指陰影水平偏移量其值可以是正負值可以取正負值,如果值為正值,則陰影在物件的右邊,反之其值為負值時,陰影在物件的左邊;

y元素:是指陰影的垂直偏移量,其值也可以是正負值,如果為正值,陰影在物件的底部,反之其值為負值時,陰影在物件的頂部;

blur:模糊半徑

[spread]:擴充套件陰影半徑(先擴充套件原有形狀,再開始畫陰影)

color:顏色

下面就是乙個普通div塊的陰影:

給每個邊設定不同的效果:

div
效果圖:                      

使用多層陰影時:

結論:如果前面的陰影模糊值小於後面的陰影模糊值,那麼前面的顯示在後面之上,如果前面陰影的模糊值大於後面的陰影模糊值,那麼前面的陰影將遮住後面的陰影效果。

盒模型與盒子陰影

對所有的盒子在瀏覽器中所佔據的空間進行計算 只要在瀏覽器中 佔據位置 的html元素,都是我們計算的盒子。寬度 width 高度 height 內邊距 padding 邊框 border width 外邊距 margin 盒子分類 邊框盒子 ie預設 和內容盒子 谷歌預設 邊框盒子在瀏覽器中佔據空間...

14 盒模型陰影box shadow

以逗號分割列表來描述乙個或多個陰影效果,可以用到幾乎任何元素上。如果元素同時設定了 border radius 陰影也會有圓角效果。多個陰影時和多個 text shadows 規則相同 第乙個陰影在最上面 預設值 none 不可繼承 值 inset 預設陰影在邊框外。使用inset後,陰影在邊框內。...

CSS樣式 盒模型

盒模型 border top border right border bottom border left margin top margin right margin bottom margin left margin 20px auto 40px 第乙個盒子與頂端相距20畫素,左右居中,第二個盒...