CSS3常見的新增的特性

2021-09-27 06:22:40 字數 1019 閱讀 4860

1.css3的選擇器

結構性偽類選擇器

e:last-child 匹配父元素的最後乙個子元素e。

e:nth-child(n)匹配父元素的第n個子元素e。

e:nth-last-child(n) css3 匹配父元素的倒數第n個子元素e。

ui元素狀態偽類選擇器

:nth-child

:nth-of-type

:disabled

:checked

:not

層級選擇器

子代選擇器

.a > ul > li{}

同級相鄰選擇器

.a h2 + p{}

同級通用選擇器

.a h2 ~ p{}

>多層重複的元素進行巢狀時,對該》號後面的標籤進行定義,而不管其他的

nth2. 一些文字和布局屬性

圓角(border-radius)

陰影(box-shadow)

邊框(border-image)

文字加特效(text-shadow),強制文字換行(word-wrap),線性漸變(linear-gradient)

旋轉,縮放,定位,傾斜 transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)

多背景、rgba();

css3中唯一引入的偽元素是 ::selection ;

**查詢(@media

動畫效果transition, animation和@keyframes

盒子模型:box-sizing

background-size 設定背景的尺寸

background-origin 設定背景的原點

background-clip 設定背景的裁切區域,以」,」分隔可以設定多背景,用於自適應布局

多欄布局(flex)

css3新增特性

css3屬性選擇器 media all screen print speech only and not min width max width orientation portrait landscape e attr value id value class value e attr value...

CSS3新增特性詳解

css 用於控制網頁的樣式和布局。css3 是最新的 css 標準。css3 被劃分為模組。其中最重要的 css3 模組包括 background rgba 0,0,0,0.3 div 圓角矩形設定4個角。圓角矩形可以為4個角分別設定圓度,但是是有順序的。border top left radius...

CSS3新增特性 transfrom

2d轉換 translate x offset,y offset 相對於自身位置的乙個偏移,單位可以設定px,相對自身的長寬 translatex translatey childrotate 20deg 給乙個順時針旋轉的度數,可為負 scale 2,3 元素的放大縮小 scalex scaley...