CSS3新增屬性

2021-09-29 04:26:05 字數 1556 閱讀 1067

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...