CSS3 新增長度單位

CSS2中常用的有：px,%,em
CSS3中有：rem，vw，vh，vmax，vmin。

1. rem：根元素字體大小的倍數,與根概素字體大小有關。
2. vw：視口寬度的百分之少，10vw 就是視口寬度的10%，隨著視口大小的變化而變化。（PC端可以用，但是移動端用的比較多）。
3. vh：視口高度的百分之多少，10vh就是視口高度的10%，隨著視口大小的變化而變化。
4. vmax：視口寬高中大的那個的百分之多少。（了解即可），隨著視口大小的變化而變化。
5. vmin：視口寬高中小的那個的分之多少。( 了解即可)，隨著視口大小的變化而變化。

CSS3 新增盒子模型相關屬性

盒子模型：CSS盒子模型是一種用于設計和布局網頁元素的基本概念。每個HTML元素被看作一個矩形的盒子，這個盒子由內部的內容（height和width設置的是內容區的寬和高）、內邊距（padding）、邊框（border）和外邊距（margin）四個部分組成。盒子的總高需要加上padding上下和border的上下。盒子的總高需要加上padding左右和border的左右。

box-sizing怪異盒模型

使用box-sizing屬性可以設置盒子模型的兩種類型

可選值	含義
content-box	width和height設置的是盒子內容區的大小。（默認值）
border-box	width和height設置的是盒子總大小。（默認值）
resize調整盒子大小
使用resize屬性可以控制是否允許用戶調節元素尺寸
值	含義
–	–
none	不允許用戶調整元素大小。（默認）
both	用戶可以調節元素的寬度和高度
horizontal	用戶可以調節元素的寬度
vertical	用戶可以調節元素的高度

box-shadow盒子陰影

使用box-shadow屬性為盒子添加陰影
語法：

box-shadow：h-shadow v-shadow blur spread color inset；

各個值的含義

值	含義
h-shadow	水平陰影的位置，必須填寫，可以為負值
v-shadow	垂直陰影的位置，必須填寫，可以為負值
blur	可選，模糊距離
spread	可選，陰影的外延值
color	可選，陰影的顏色
inset	可選，將外部陰影改為內部陰影

默認值：box-shadow：none表示沒有陰影
用法示例：（注意寫的時候屬性值的順序按照以上表格的順序。

.box {box-shadow: 5px 5px 10px #888888;
}

在上述示例中，.box類的元素將會顯示一個向右下方偏移5px的陰影，模糊半徑為10px，顏色為灰色(#888888)。

.box {box-shadow: 10px 10px ;
}

.box類的元素將會顯示一個水平位置，垂直位置偏移10px的陰影。

高級用法：

.box {box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),0 0 20px rgba(0, 0, 0, 0.3) inset;
}

上面示例中，.box類的元素同時應用了兩個陰影效果：一個外部陰影和一個內部陰影。第一個陰影是一個外部陰影，帶有模糊效果，顏色為半透明的黑色；第二個陰影是一個內部陰影，無模糊效果，顏色為半透明的黑色。

/*寫六個值含義：水平位置，垂直位置，模糊程度，外延值，陰影部分顏色，內陰影*/
box-shadow:10px 10px 20px 10px blue inset;

opacity不透明度

opacity用于控制元素的不透明度級別，允許開發者調整元素的透明度。該屬性接受一個值，范圍從0（完全透明）到1（完全不透明）。

語法：

opacity: value;

value：取值范圍為0到1之間，表示元素的不透明度級別。0代表完全透明，1代表完全不透明。
示例：

.box {opacity: 0.5;
}

在上述示例中，.box類的元素將被設置為50%的不透明度，即半透明狀態。這意味著背景、內容等元素會透過這個元素顯示出來，看起來有一種半透明的效果。

注意事項：
使用opacity屬性會影響元素及其內部內容的透明度，而且它會繼承給子元素。
不透明度并不僅僅限于元素的可見性。即使元素是不可見的（例如display: none;），opacity屬性依然會生效。
透明度不會改變元素的盒子模型（邊框、內外邊距等），只會影響元素內容的透明度。
opacity屬性通常用于創建半透明的背景、懸浮效果，或者用于優化網頁設計中的視覺層次和樣式。

CSS3 新增背景屬性

background-origin背景屬性

background-origin屬性用于指定背景圖片的定位區域，即指定背景圖片相對于元素框盒的起始位置。該屬性可以幫助控制背景圖片在元素內的顯示方式。

語法：

background-origin: padding-box | border-box | content-box;

padding-box：背景圖片從內邊距區域開始顯示。（默認值）
border-box：背景圖片從邊框區域開始顯示。
content-box：背景圖片從內容區域開始顯示。
示例：

.box {background-image: url('example.jpg');background-origin: padding-box;
}

在上面的示例中，.box類的元素將使用名為example.jpg的背景圖片，并且該背景圖片會從內邊距區域開始顯示。

注意事項：
background-origin屬性通常與background-clip屬性結合使用，以更好地控制背景圖片的顯示效果。
當元素的背景圖片與邊框、內邊距等發生重疊時，可以通過設置不同的background-origin值來調整背景圖片的顯示位置。

background-clip背景屬性

background-clip用于定義背景圖片或顏色的繪制區域。通過指定background-clip的值，可以控制背景的繪制范圍以及如何裁剪溢出的部分。

語法：

background-clip: border-box | padding-box | content-box;

border-box：背景在邊框盒內繪制。超出邊框的背景圖不呈現。(默認值）
padding-box：背景在內邊距框框內繪制。超出內邊距的背景圖不呈現。
content-box：背景在內容框框內繪制。超出內容框的背景圖不呈現。
text：超出文字的背景圖不呈現，背景圖只呈現在文字上。
示例：

.element {background: url('example.jpg') no-repeat;background-clip: padding-box;
}

在上述示例中，.element類的元素使用名為example.jpg的背景圖片，并且指定背景圖片在內邊距框框內繪制。

注意事項：
使用background-clip屬性可以控制背景圖片或顏色的繪制區域，以適應設計需求。
結合background-origin和background-clip屬性，可以更精確地控制背景圖片的顯示位置和繪制范圍。
這個屬性通常用于解決背景圖片與元素邊界之間的關系，以確保背景的正確顯示。

background-size背景屬性

background復合屬性

/*background：背景顏色 背景鏈接url 是否重復 位置/大小 原點 裁剪方式 ；*/
background:blue url(../資料/圖片/bg01.jpg) no-repeat 10px 10px/500px 500px border-box;

多背景圖

允許元素設置多個背景圖

.box2
{width:400px;height: 400px;background-color:blue;font-size: 40px;font-weight: bold;border: 1px solid black;background: url(../資料/圖片/bg-lt.png) no-repeat left top,url(../資料/圖片/bg-rt.png) no-repeat right top,url(../資料/圖片/bg-lb.png) no-repeat left bottom,url(../資料/圖片/bg-rb.png) no-repeat right bottom;
}

CSS3 新增邊框屬性

border-radius邊框屬性

outline邊框外輪廓

CSS3 新增文本屬性

文本陰影（錯位）

h1{font-size: 40px;text-align: center;color:black;text-shadow:0px 0px 20px red;
}

文本換行

文本溢出

li{margin-bottom: 10px;overflow: hidden;white-space: nowrap;text-overflow: clip;
}

文本修飾

文本描邊

CSS3 新增漸變

線性漸變

調整漸變的角度為中心線以中心點旋轉XX度

background- image: linear-gradient(red 50px, yellow 100px， green 150px) ;

以上代碼為：
0-50px 純紅
50px-100px變黃
100px-150px變綠
150px到其他為純綠

徑向漸變

重復漸變

CSS3 web字體

CSS3 字體圖標

CSS3 2D變換

2D位移

2D縮放

2D旋轉

繞Z軸旋轉

2D扭曲

2D多重變換

2D變換原點

CSS3 3D變換

3D空間和景深

x，y，z軸，在Z軸上做出改變就是向我們移動而來，或者向我們遠去。

3D透視點位置

3D位移

3D旋轉

3D縮放

多重變換

背部

救命啊。知識點好多，記不住啊。。。。。