陰影：

邊框陰影：
box-shadow
1、水平偏移量 正值向右 負值向左；
2、垂直偏移量 正值向下 負值向上；
3、模糊度是不能為負值； 程式碼演示：

文字陰影：
text-shadow：與上圖一致

邊框

邊框圓角：
border-radius：上右下左；
邊框圖片：
border-image-source 用在邊框的圖片的路徑。
border-image-slice 圖片邊框向內偏移。
border-image-width 圖片邊框的寬度。
border-image-outset 邊框影象區域超出邊框的量，邊框背景圖的擴充套件
border-image-repeat 影象邊框是否應平鋪 重複性(repeat)、鋪滿(round)或拉伸(stretch)。

背景圖

起始位置：background-origin；
邊框為起點：border-box；
內容為起點：content-box；
內邊框為起點：padding-box;
邊框尺寸：background-size；
背景裁剪：background-clip;
邊框裁剪：border-box；
內容裁剪：content-box；
內邊裁剪：padding-box;
背景圖片：background：url(路徑) left top,url(路徑) right top;

漸變

線性漸變：linear-gradient（角度 to 方向，顏色1，顏色2）
eg:傳送帶；

徑向漸變：radial-gradient（向外擴散範圍，at 擴散中心點，顏色1，顏色2）
eg:球體

動畫：

過渡：

transition-property:方向;
transition-duration：時間；
縮寫：transition:方向 時間;
transition-delay：延遲載入；
transition-timing-function:速度：{
linear ；勻速
ease；平滑過渡
ease-in：加速
ease-out：減速
ease-in-out：先快後慢}

變換

transform；
旋轉：rotate; rotate(x軸旋轉,y軸，z軸)；單位deg;
位移：translate; translate（水平，垂直）單位px;
縮放：scale; scale（水平縮放，垂直）無單位，幾倍;
扭曲：skew;skew(水平扭曲，垂直)單位deg;
translate-origin:位置；旋轉中心；
eg: