一.邊框

1.邊框圓角
border-radius
2.邊框陰影
box-shadow
3.邊框圖片
border-inage-source:url("")
border-image-repeat:設定背景圖的平鋪方式,streth(拉伸)round(圖片自動調整縮放比例)
border-image-slice裱框切割
border-image-outset邊框向外邊框背景圖的擴充套件
border-image-width:邊框背景圖的厚度

二.瀏覽器私有化的字首

-webkit:谷歌和蘋果瀏覽器的私有化字首
-moz:火狐瀏覽器私有化字首
-o:表示Opera瀏覽器私有化字首
-ms:表示IE瀏覽器私有化字首

三.文字陰影

1.text-shadow
例:
Text-shadow：10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（陰影的大小） #fff（陰影的顏色）
2.多個陰影顯示:
例:
Text-shadow：10px(水平偏移量)20px(垂直的偏移量)10px（模糊程度） 2px（陰影的大小） #fff(陰影的顏色),
10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（陰影的大小） #fff（陰影的顏色）
3.內陰影：Text-shadow：inset 10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（陰影的大小） #fff（陰影的顏色)

四.背景

1.背景圖片background:url( ) no-repeat;//no-repeat,去除圖片重複性//
2.background-size: 背景圖片的大小尺寸
3.background-origin: 背景圖片的起始點(border-box以邊框為起始點;content-box預設值以內容為起始點;padding-box以內邊距為起始點)
4.背景裁剪區域 background-clip:border-box/content-box
5.多背景
background:url() left top no-repeat,
url() right top no-repeat,
url() right bottom no-repeat,
url() left bottom no-repeat,
url() no-repeat center center;

五.漸變

1.線性漸變
background:linear-gradient(to left ,yellow ,green );
background: linear-gradient(90deg,yellow,green,red);//deg設定角度//
2.動畫

3.徑向漸變
background:radial-gradient();
例:
background: radial-gradient(at center,yellow,green);
background: radial-gradient(50px at left top,yellow,green);//at之前設定向外輻射的範圍//

六.過渡

1.transition:param1 param2;
param1 要過渡的屬性 param2要過渡的時間
例:transition: width 8s,height 3s;
2.transition: all 2s;(all表示該元素的所有屬性)
3.分開寫: