**點擊穿透**

pointer-events: none;

**灰階效果**（0%即為完全變黑）

filter: brightness(40%);

**背景模糊**

-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);

**水平垂直置中**

display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;

**文字換行**

/* 文字強迫換行，英文字會被切一半 */
word-break: break-all;
/* 依單字換行 */
word-wrap:break-word;
/* 死都不換行 */
white-space:nowrap;

**變形效果**

/* 旋轉 */
transform:rotate(-30deg);
/* 傾斜 */
transform:skewX(20deg);
/* 縮放 */
transform:scaleX(1.2);
transform:scaleY(1.8);
transform:scale(0.8,0.8);

**animation 動畫屬性清單**（[CSS3 animation 動畫屬性](https://www.wibibi.com/info.php?tid=CSS3_animation_%E5%8B%95%E7%95%AB%E5%B1%AC%E6%80%A7)）

.CardFlip {
	animation-iteration-count: infinite; /*播放次數 (可設定數字或 infinite設定為無限)*/
	animation-duration: 300ms; /*動畫執行1次所需的時間(s or ms)*/
	animation-delay: 0; /*延遲執行時間 (s or ms)*/
	animation-timing-function: linear; /* 動畫播放速度曲線：linear (均速)、ease	(緩入中間快緩出)(預設值)、ease-in (緩入)、ease-out (緩出)、ease-in-out (緩入緩出)(對比於ease較平緩) */
	animation-play-state: running; /* 指定動畫播放或暫停：running (預設播放)、paused (暫停播放) */
	animation-direction: alternate; /* 播放方向/順序：normal(正常播放)、reverse (反向播放)、alternate (正向撥放，再反向播放)、alternate-reverse (反向撥放，再正向播放) */
	animation-fill-mode: none; /* 指定動畫播放完畢的狀態：none (回到最初未撥放狀態)、forwards (停在最後一個狀態)、backwards (停在第一個狀態)、both (停留在 animation-direction 最後一個狀態) */
	animation-name: FlipEffect; /*動畫名稱*/
}
@@keyframes FlipEffect {
	0% {
		transform: scaleX(1);
	}
	50% {
		transform: scaleX(-1);
	}
	100% {
		transform: scaleX(1);
	}
}

**文字過長顯示「…」**

text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;

**如果用了padding-top或padding-bottom會拉長物件的話**

box-sizing: border-box;

**讓圖片保持原本的寬高比顯示在容器內不超出容器也不變形**

object-fit: contain;