CSS3新增特性詳解

css 用於控制網頁的樣式和布局。css3 是最新的 css 標準。

css3 被劃分為模組。其中最重要的 css3 模組包括：

background

:rgba
(0, 0, 0, 0.3)
;

div

圓角矩形可以為4個角分別設定圓度， 但是是有順序的。

border-top-left-radius

:20px;
border-top-right-radius
:20px;
border-bottom-right-radius
:20px;
border-bottom-left-radius
:20px;

border-radius

: 15px;

border-radius

: 左上角 右上角 右下角 左下角; 遵循順時針

box-shadow

:水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內/**影；

描述h-shadow

必需。水平陰影的位置。允許負值。

v-shadow

必需。垂直陰影的位置。允許負值。

blur

可選。模糊距離。

spread

可選。陰影的尺寸。

color

可選。陰影的顏色。請參閱css顏色值。

inset

可選。將外部陰影（outset）改為內部陰影。

div

簡介e[att]

選擇具有att屬性的e元素

e[att=「val」]

選擇具有att屬性、且屬性值等於val的e元素

e[att^=「val」]

選擇具有att屬性、且屬性值以val開頭的e元素

e[att$=「val」]

選擇具有att屬性、且屬性值以val結尾的e元素

e[att*=「val」]

選擇具有att屬性、且屬性值中含有val的e元素

button

button[disabled]
input[type=search]
span[class^=black]
span[class$=black]
span[class*=black]

簡介e:first-child

匹配父元素中的第乙個子元素e

e:last-child

匹配父元素中的最後乙個子元素e

e:nth-child(n)

匹配父元素中的第n個子元素e

e:first-of-type

匹配指定型別e的第乙個元素

e:last-of-type

匹配指定型別e的最後乙個元素

e:nth-of-type(n)

匹配指定型別e的第n個元素

ul li:first-child

ul li:last-child
ul li:nth-child(3)

取值2n

偶數2n+1

奇數5n

5 10 15 …

n+5從第5個開始（包含第5個）到最後

-n+5

前5個（包含第5個）…

簡介::before

在元素內部的前面插入內容

::after

在元素內部的後面插入內容

偽類選擇器注意事項：

p

p::after

2d 轉換是改變標籤在二維平面上的位置和形狀

translate 語法

transform

:translate
(x, y)
transform
:translatex
(n)transfrom
:translatey
(n)

div

>

divp
span
style
>

rotate語法

/* 單位是：deg */

transform
:rotate
(度數)

注意:

使用步驟：

給元素新增轉換屬性 transform

屬性值為 rotate(角度) 如 transform:rotate(30deg) 順時針方向旋轉30度

img:hover

transform-origin

: x y;

scale 的作用 語法

transform

:scale
(x, y)

注意:

div:hover

**演示

div:hover

定義動畫:

@keyframes 動畫名稱

100%
}

div

時間節點，可以更為精準的控制動畫的多個狀態節點，動畫的變化更為豐富；

動畫序列就是時間節點時的狀態；

n步變化，就需要n+1個節點；

動畫從開始執行到經過動畫節點，都是基於上乙個狀態進行變化

描述@keyframes

規定動畫

animation

所有動畫的簡寫屬性，除了animation-play-state屬性

animation-name

規定@keyframes動畫的名稱

animation-duration

規定動畫完成乙個週期所花費的時間(秒或毫秒)，預設是0

animation-timing-function

規定動畫的速度曲線，預設是"ease"

animation-delay

規定動畫何時開始，預設是0

animation-iteration-count

animation-direction

animation-play-state

規定動畫是否正在執行或暫停。預設是"running",還有"pause"。

animation-fill-mode

規定動畫結束後狀態，保持forwards 回到起始backwards

div

/* 分步 實現 老電影一幀一幀，整個動畫分為幾步驟完成*/

animation-timing-function
:steps
(n);

div

div

div

div

div

animation

: name_1 5s linear,name_2 2s linear;

div

div:hover

CSS3新增特性詳解（二）

上篇博文主要介紹了css3新增特性中的靜態特性，比如新的選擇器 多背景圖 陰影 漸變等。本文主要介紹css3中新增的動態特性，如過度 動畫 變形等。transitian webkit transition all 0.5s linear 0.3s 過度效果，習慣上也叫做漸變。只不過這個漸變是指為動態...

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新增特性 transfrom

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