web前端基礎知識(三)#CSS3新特性

CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展。
CSS龐大而且比較複雜，CSS3把CSS分解爲一些小的模塊，更多新的模塊也被加入進來。CSS3中的模塊包括： 盒子模型、列表模塊、超鏈接方式
、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。

一、圓角邊框與陰影

1.1 圓角邊框 boder-radius

boder-radius屬性含水平值和垂直值

屬性	意義
boder-top-left-radius	左上角的形狀
boder-top-right-radius	右上角的形狀
boder-bottom-left-radius	左下角的形狀
boder-bottom-right-radius	右下角的形狀

案例：

1.2 陰影 box-shadow

屬性基本語法：
box-shadow: (inset/outset) 水平偏移 垂直偏移 模糊距離 顏色;

inset : 可選，內部陰影

div{
	width: 300px;
	height: 100px;
	background: #f90;
	box-shadow: inset 10px 10px 5px #888;
}

效果：

---

outset : 默認值，外部陰影

div{
	width: 300px;
	height: 100px;
	background: #f90;
	box-shadow: 10px 10px 5px #888;
}

效果：

二、文字與文本

2.1 text-shadow屬性

屬性基本語法：
text-shadow: 水平偏移 垂直偏移 陰影大小 顏色;

案例：

2.2 word-wrap屬性

允許長單詞、URL強制進行換行

三、2D轉換

2D轉換的方法有：
對元素進行旋轉、縮放、移動、拉伸

3.1 旋轉 transform:rotate()

屬性基本語法：
transform:rotate( 旋轉度數 );

案例：

3.2 縮放 transform:scale()

屬性基本語法：
transform:scale(x,y);
x：水平方向縮放的倍數
y： 垂直方向縮放的倍數

倍數：0~1表示縮小，>1表示放大

案例：

四、過渡與動畫

4.1 過渡 transition屬性

將元素中的某個屬性從“一個值”在指定時間內過渡到“另一個值”。

屬性的基本語法：
transition: 屬性名 過渡時間 過渡方法;

transition-property: 屬性名| all（對哪個屬性進行變化）

transition-duration: 持續時間;

transition-timing-function: 過渡使用的方法（函數）;
transition-timing-function屬性取值：

值	描述
linear	勻速
ease	慢快慢
ease-in	慢快
ease-out	快慢
ease-in-out	慢快慢

案例：

4.2 動畫 animation屬性

（一）定義動畫：@keyframes規則
（二）調用動畫：animation屬性

animation屬性取值：

值	描述
animation	簡寫
animation-name	引用@keyframes定義的動畫名稱
animation-duration	動畫完成時間
animation-timing-function	規定動畫的時間曲線。默認是"ease"
animation-play-state	running/paused

案例：

五、3D轉換

3D —> transform-style: preserve-3d;

5.1 3D旋轉

rotateX(角度deg);
rotateY(角度deg);
rotateZ(角度deg);

三個屬性的旋轉方向：

5.2 透視 perspective屬性

即眼睛到舞臺的距離

屬性基本語法：
perspective: 100px;

無透視狀態下旋轉：

有透視狀態下（下圖右側的青蛙）旋轉：

---

寫在最後：新手上路，如有問題，歡迎大家指出，給意見。如果這篇文章對你有幫助，麻煩幫忙點一下贊，你們小小的舉動能給我無限大的動力。拒絕白嫖，從我做起，從現在做起。Thank you for watching!