樣式

背景

background-origin： 規定背景圖片的定位區域。

☞ padding-box     背景影像相對內邊距定位（預設值）
☞ border-box	   背景影像相對邊框定位【以邊框左上角為參照進行位置設定】
☞ content-box     背景影像相對內容區域定位【以內容區域左上角為參照進行位置設定】

備註：
1. 預設盒子的背景圖片是在盒子的內邊距左上角對齊設定。

background-clip： 規定背景的繪製區域。

☞ border-box	 背景被裁切到邊框盒子位置 【將背景圖片在整個容器中顯示】
☞ padding-box	 背景被裁切到內邊距區域【將背景圖片在內邊距區域（包含內容區域）顯示】
☞ content-box	 背景被裁切到內容區域【將背景圖片在內容區域顯示】

background-size： 規定背景圖片的尺寸。

☞ cover
☞ contain

邊框

box-shadow： 盒子陰影
border-radius： 邊框圓角
border-image: 邊框圖片

     /* 設定邊框圖片 */
  	 border-image-source: url("2.png");
  	 
  	 /* 邊框圖片裁切 : 不需要帶單位*/
  	 border-image-slice: 20;
  	 
  	 /* 設定邊框圖片的平鋪方式 */
  	 /* border-image-repeat: stretch; */
  	    border-image-repeat: round;
		 /*border-image-repeat: repeat; */

  	border-image-width: 20px;

文字

☞text-shadow： 設定文字陰影

選擇器

☞ 屬性選擇器：

[屬性名=值] {}
[屬性名] {} 匹配對應的屬性即可
[屬性名^=值] {} 以值開頭
[屬性名*=值] {} 包含
[屬性名$=值] {} 以值結束

☞ 結構偽類選擇器：

:first-child {} 選中父元素中第一個子元素
:last-child {} 選中父元素中最後一個子元素
:nth-child(n) {} 選中父元素中正數第n個子元素
:nth-last-child(n) {} 選中父元素中倒數第n個子元素

  備註；
	 n 的取值大於等於0
     n 可以設定預定義的值
		odd[選中奇數位置的元素]  
		even【選中偶數位置的元素】
     n 可以是一個表示式：
		 an+b的格式

☞ 其他選擇器：

:target 被錨連結指向的時候會觸發該選擇器
::selection 當被滑鼠選中的時候的樣式
::first-line 選中第一行
::first-letter 選中第一個字元

顏色漸變

☞ 線性漸變：

     1. 開始顏色和結束顏色
     2. 漸變的方向
     3. 漸變的範圍

 background-image:  linear-gradient(
                to right,
                red,
                blue
		);

備註：
 	表示方向：
		 1. to + right | top | bottom | left 
		 2. 通過角度表示一個方向
		   0deg [從下向上漸變] 
		   90deg【從左向右】

☞ 徑向漸變：

	   /* 徑向漸變 */
		background-image: radial-gradient(
			 100px at center,
			 red,
			 blue
		);

2D轉換

☞ 位移

   transform: translate(100px,100px);
   備註：
 	   位移是相對元素自身的位置發生位置改變

☞ 旋轉

   transform: rotate(60deg);
   備註：
	   取值為角度

☞ 縮放

    transform: scale(0.5,1);
	備註：
		 取值為倍數關係，縮小大於0小於1，放大設定大於1

☞ 傾斜

   transform: skew(30deg,30deg);
   備註：
	  第一個值代表沿著x軸方向傾斜
	  第二個值代表沿著y軸方向傾斜

3D轉換

☞ 位移

transform: translateX()  translateY()   translateZ()

☞ 旋轉

 transform: rotateX(60deg)  rotateY(60deg)  rotateZ(60deg);

☞ 縮放

  transform: scaleX(0.5)  scaleY(1)  scaleZ(1);

☞ 傾斜

  transform: skewX(30deg) skewY();

☞ transform-style: preserve-3d;

 將平面圖形轉換為立體圖形

動畫

過渡

補間動畫

		/* 設定哪些屬性要參與到過渡動畫效果中： all */
		transition-property: all;

		/* 設定過渡執行時間 */
		
		transition-duration: 1s;

		/* 設定過渡延時執行時間 */
		transition-delay: 1s;

		/* 設定過渡的速度型別 */

		transition-timing-function: linear;

動畫

/* 1定義動畫集 */

	@keyframes  rotate 
	
		/* 定義開始狀態  0%*/
		from {
			transform: rotateZ(0deg);
		}

		/* 結束狀態 100%*/
		to {
		   transform: rotateZ(360deg);
		}
	}
注意：
	 1. 如果設定動畫集使用的是百分比，那麼記住百分比是相對整個動畫執行時間的。

網頁佈局

響應式佈局

☞ 設定父元素為伸縮盒子【直接父元素】
display： flex

  為什麼在伸縮盒子中，子元素會在一行上顯示？
		 1. 子元素是按照伸縮盒子中主軸方向顯示
		 2. 只有伸縮盒子才有主軸和側軸
		 3. 主軸： 預設水平從左向右顯示
		 4。 側軸： 始終要垂直於主軸

☞ 設定伸縮盒子主軸方向（flex-direction）

	   	flex-direction: row; 【預設值】
		flex-direction: row-reverse;
		flex-direction: column;
		flex-direction: column-reverse;

☞ 設定元素在主軸的對齊方式( justify-content)

	/* 設定子元素在主軸方向的對齊方式 */
		justify-content: flex-start;
		justify-content: flex-end;
		justify-content: center;
		justify-content: space-between;
		justify-content: space-around;

☞ 設定元素在側軸的對齊方式 （align-items）

		align-items: flex-start;
		align-items: flex-end;
		align-items: center;

		/* 預設值 */
		align-items: stretch;

☞ 設定元素是否換行顯示（flex-wrap）

	  1. 在伸縮盒子中所有的元素預設都會在一行上顯示
	  2. 如果希望換行：
		flex-wrap: wrap | nowrap;

☞ 設定元素換行後的對齊方式（ align-content）

	    align-content: flex-start;
		align-content: flex-end;
		align-content: center;
		align-content: space-around;
		align-content: space-between;
		/* 換行後的預設值 */
		align-content: stretch;

更多詳細內容請參考W3School官方網站CSS3相關內容