css3被劃分為模組,最重要的幾個模組包括:選擇器、框模型、背景和邊框、文字效果、2d/3d 轉換、動畫、多列布局、使用者介面邊框
border-radius
設定圓角
box-shadow
設定陰影
border-image
設定邊框背景
背景background-size
規定背景的尺寸
background-origin
規定背景的定位區域
background-clip
規定背景的繪製區域
文字效果(常用)
text-shadow
設定文字陰影
word-wrap
強制換行
word-break
可以讓瀏覽器實現在任意位置的換行
css3提出@font-face規則,規則中定義了
font-family
字型名稱
font-weight
字型粗細
font-style
字型風格樣式
font-stretch
字型應該如何被拉長
srcunicode-range
定義該字型支援unicode字元的範圍
2/3d轉換
transform
向元素應用2/3d轉換
transition
過渡動畫
@keyframes規則:
animation
用來控制動畫的外觀,還使用選擇器繫結動畫
animation-name
定義animation的名稱。
animation-duration
定義動畫完成乙個週期需要多少秒或毫秒
使用者介面(常用)
box-sizing
允許以特定的方式定義匹配某個區域的特定元素
resize
規定是否可由使用者調整元素的尺寸
css3新增偽類
:nth-child()
選擇父元素下的第幾個子元素
:nth-last-child()
選擇父元素下倒數的第二個子元素
:only-child
選擇僅有乙個子元素的某個元素
:last-child
選擇父元素下最後乙個元素
:nth-of-type()
選擇父元素下第幾個與父元素相同型別的子元素
:only-of-type()
選擇父元素下僅有乙個子元素雨父元素型別相同的元素
:empty
選擇沒有子元素的某個元素
:target
這個偽類允許我們選擇基於url的元素,如果這個元素有乙個識別器(比如跟著乙個#),那麼:target會對使用這個id識別器的元素增加樣式。
:enabled
選擇所有啟動的某個元素
:disabled
選擇所有禁用的某個元素
:checked
選擇所有被選中的某個元素
:not(selector)
選擇除了selector之外的元素
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...
css3 新增屬性
background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...
Css3新增屬性
1.新增邊框屬性 box shadow 實現邊框陰影 屬性值有 模糊度 x軸偏移y軸偏移 color 陰影顏色 border radius 實現圓角邊框 屬性值越大角度越大 border image 實現邊框 border image source slice width outset repeat...