css 盒模型新增樣式

2021-10-10 09:49:10 字數 1679 閱讀 7965

box-shadow

以逗號分割列表來描述乙個或多個陰影效果,可以用到幾乎任何元素上。 如果元素同時設定了 border-radius ,陰影也會有圓角效果。多個陰影時和多個 text shadows 規則相同(第乙個陰影在最上面)。

預設值: none 不可繼承

值:inset

預設陰影在邊框外。

使用inset後,陰影在邊框內。

這是頭兩個 值,用來設定陰影偏移量。

設定水平偏移量,如果是負值則陰影位於元素左邊。

設定垂直偏移量,如果是負值則陰影位於元素上面。

如果兩者都是0,那麼陰影位於元素後面。

這時如果設定了或則有模糊效果。

這是第三個 值。值越大,模糊面積越大,陰影就越大越淡。

不能為負值。預設為0,此時陰影邊緣銳利。

這是第四個 值。取正值時,陰影擴大;取負值時,陰影.收縮。預設為0,此時陰影與元素同樣大。

陰影顏色,如果沒有指定,則由瀏覽器決定

test

view code

-webkit-box-reflect  設定元素的倒影

預設值:none 不可繼承

值:(必須是123的順序)

倒影的方向

第乙個值,above, below, right, left

倒影的距離

第二個值,長度單位

漸變第三個值

view code

resize css 屬性允許你控制乙個元素的可調整大小性。

(一定要配合overflow:auto使用)

預設值:none 不可繼承

值:none

元素不能被使用者縮放。

both

允許使用者在水平和垂直方向上調整元素的大小。

horizontal

允許使用者在水平方向上調整元素的大小。

vertical

允許使用者在垂直方向上調整元素的大小。

view code

box-sizing 屬性用於更改用於計算元素寬度和高度的預設的 css 盒子模型。可以使用此屬性來模擬不正確支援css盒子模型規範的瀏覽器的行/列為。

預設值:content-box 不可繼承

值content-box

預設值,標準盒子模型。 width 與 height 只包括內容的寬和高, 不包括邊框(border),內邊距(padding),外邊距(margin)。注意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。 比如. 如果 .box ; 而且 那麼在瀏覽器中的渲染的實際寬度將是370px;

尺寸計算公式:

width = 內容的寬度,

height = 內容的高度。

寬度和高度都不包含內容的邊框(border)和內邊距(padding)。

border-box

width 和 height 屬性包括內容,內邊距和邊框,但不包括外邊距。這是當文件處於 quirks模式 時internet explorer使用的盒模型。

這裡的維度計算為:

width = border + padding + 內容的 width,

height = border + padding + 內容的 height。

view code

CSS樣式 盒模型

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

CSS選擇器 樣式 盒模型

1.通配選擇器 html,body以及body下用於顯示的標籤 html和body顏色會被改變,但是div標籤不會發生改變,由於不同的選擇器具有優先順序 語法 2.標籤名 標籤選擇器 該標籤對應的所有該標籤 在實際開發中,盡量少用或不用標籤名來作為選擇器,標籤名如果作為選擇器的話一般在該標籤為最內層...

css盒模型 標準盒模型 怪異盒模型

css 盒子模型 box model 每個html元素都可以看作是乙個盒子,父元素和子元素的關係就行大盒子裡放了個小盒子,兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...