7. 陰影、圓角、旋轉、光標

（1）box-shadow 陰影

基本語法

text-shadow: h-shadow v-shadow blur color;
box-shadow: h-shadow v-shadow blur spread color inset;

語法取值

h-shadow : 必需。水平陰影的位置。允許負值。
v-shadow : 必需。垂直陰影的位置。允許負值。
blur : 可選。模糊的距離。
spread : 可選。陰影的大小。
color : 可選。陰影的顏色。
inset : 可選。從外層的陰影（開始時）改變陰影內側陰影。

（2）border-radius 圓角邊框

基本語法

border-radius : border-top-left-radius || border-top-right-radius || border-bottom-right-radius || border-bottom-left-radius;

語法取值

border-radius 屬性是一個最多可指定四個 border -*- radius 屬性的復合屬性。

使用說明

每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

（3）border-top-left-radius

基本語法

border-top-left-radius : length;

語法取值

length  :　 百分比數字 | 由浮點數字和單位標識符組成的長度值

使用說明

定義左上角的圓角邊框。

（4）border-top-right-radius

基本語法

border-top-right-radius : length;

語法取值

length  :　 百分比數字 | 由浮點數字和單位標識符組成的長度值

使用說明

定義右上角的圓角邊框。

（5）border-bottom-left-radius

基本語法

border-bottom-left-radius : length;

語法取值

length  :　 百分比數字 | 由浮點數字和單位標識符組成的長度值
 

使用說明

定義左下角的圓角邊框。

（6）border-bottom-right-radius

基本語法

border-bottom-right-radius : length;

語法取值

length  :　 百分比數字 | 由浮點數字和單位標識符組成的長度值

使用說明

定義右下角的圓角邊框。

（7）transform 旋轉

基本語法

transform : none|transform-functions;

語法取值

none ：定義不進行轉換。
matrix(n,n,n,n,n,n) ：定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) ：定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) ： 定義 2D 轉換。
translate3d(x,y,z) ：定義 3D 轉換。
translateX(x) ：定義轉換，只是用 X 軸的值。
translateY(y) ：定義轉換，只是用 Y 軸的值。
translateZ(z) ：定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?) ：定義 2D 縮放轉換。
scale3d(x,y,z) ：定義 3D 縮放轉換。
scaleX(x) ：通過設置 X 軸的值來定義縮放轉換。
scaleY(y) ：通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z) ：通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) ：定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle) ：定義 3D 旋轉。
rotateX(angle) ：定義沿著 X 軸的 3D 旋轉。
rotateY(angle) ：定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) ：定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) ：定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) ：定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle) ：定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n) ：為 3D 轉換元素定義透視視圖。

使用說明

Transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

（8）cursor 光標

基本語法

cursor : default | auto | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help;

語法取值

default 默認光標（通常是一個箭頭）
auto    默認。瀏覽器設置的光標。
crosshair   光標呈現為十字線。
pointer 光標呈現為指示鏈接的指針（一只手）
move    此光標指示某對象可被移動。
e-resize    此光標指示矩形框的邊緣可被向右（東）移動。
ne-resize   此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
nw-resize   此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
n-resize    此光標指示矩形框的邊緣可被向上（北）移動。
se-resize   此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
sw-resize   此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
s-resize    此光標指示矩形框的邊緣可被向下移動（北/西）。
w-resize    此光標指示矩形框的邊緣可被向左移動（西）。
text    此光標指示文本。
wait    此光標指示程序正忙（通常是一只表或沙漏）。
help    此光標指示可用的幫助（通常是一個問號或一個氣球）。

使用說明

cursor屬性定義了鼠標指針放在一個元素邊界範圍內時所用的光標形狀。

CSS 筆記——陰影、圓角、旋轉、光標