文字相關
文字間距 letter-spacing: 2px; 強制為大寫字母 text-transform: uppercase; 強制為小寫字母 text-transform: lowercase; 不允許換行 white-space: nowrap; === 文字豎向排列 === 默認：水平方向，從上到下 writing-mode:horizontal-tb; 垂直方向，從右向左 writing-mode:vertical-rl; 垂直方向，從左向右 writing-mode:vertical-lr; 小技巧：圖片結合writing-mode垂直方向，加上text-align:center，可實現圖片垂直居中； 再結合margin: auto實現圖片上下左右中心居中效果。
SVG相關
// SVG自由縮放寬高 <svg preserveAspectRatio="none" ……> // SVG引用 <svg id="svg001" style="…"> …… </svg> // 完整的SVG文件，定義ID為：svg001 <svg style="…"> <use xlink:href="#svg001"> </svg> // 直接引用上方ID，xlink:href="#svg001"，可以自定義其它樣式
鼠標相關
// 關閉層上鼠標事件 pointer-events: none; // 開啟層上鼠標事件 pointer-events: auto; // 禁止鼠標拖拽、選中文字 user-drag:none;user-select:none; // 允許鼠標拖拽、選中文字 user-drag:auto;user-select:auto; // 鼠標樣式示例：鼠標手型 cursor: pointer; // 各種CSS鼠標樣式 // default 默認光標（通常是一個箭頭） auto 默認。瀏覽器設置的（user agent stylesheet）光標 crosshair 光標呈現為十字 pointer 光標呈現為指示鏈接的指針（一只小手） move 此光標指示某對象可被移動（帶箭頭的十字） e-resize 此光標指示矩形框的邊緣可被向右（東）移動 ne-resize 此光標指示矩形框的邊緣可被向上及向右移動（北/東） nw-resize 此光標指示矩形框的邊緣可被向上及向左移動（北/西） n-resize 此光標指示矩形框的邊緣可被向上（北）移動 se-resize 此光標指示矩形框的邊緣可被向下及向右移動（南/東） sw-resize 此光標指示矩形框的邊緣可被向下及向左移動（南/西） s-resize 此光標指示矩形框的邊緣可被向下移動（南） w-resize 此光標指示矩形框的邊緣可被向左移動（西） text 此光標指示文本 wait 此光標指示程序正忙（通常是一只表或沙漏，或者一個圈在那轉） help 此光標指示可用的幫助（通常是一個問號或一個氣球）
自定義字段函數
:root{--myWidth: 66;}
width: var(--myWidth)px;
:root{--myRgb: 100,200,255;}
color:rgba(var(--myRgb),1);linear-gradient() 線性顏色漸變（模擬圖片）
// linear-gradient()模擬的是圖片，所以background-color屬性下無效，只能用background或background-image // 從上到下，藍色漸變到紅色 linear-gradient(blue, red) // 功能完整的示例，注：下面的百分比“xxx%”指的是某個色彩的位置節點，不是色彩段長度。 background-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
radial-gradient() 徑向顏色漸變（模擬圖片）
// 顏色結點不均勻分布 background-image: radial-gradient(red 5%, green 15%, blue 60%); // 圓形徑向漸變 background-image: radial-gradient(circle, red, yellow, green); // 不同尺寸大小關鍵字的使用 background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black); background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
延伸應用
// 利用混色背景，實現減淡指定顏色且不透明 background:radial-gradient(circle, rgba(var(--modRgb),.3),rgba(var(--modRgb),.3)),#fff;
animation 動畫
/* keyframes 定義動畫 */
@keyframes myname<動畫名稱>{
0%{opacity:0;}
50%{opacity:.8;}
100%{opacity:0;}
}
/* animation 調用動畫 */
mydiv {
animation:myname 2s ease 1s infinite<循環> reverse<反向> both>;
動畫名稱 + 持續時間 + 運動曲線 + 延遲時間 + 播放次數 + 是否反向 + 動畫起始或終止狀態
}
/* animation 動畫暫停與啟動 */
mydiv:hover{
animation-play-state:paused; //暫停
animation-play-state:running; //啟動
}transform 變形
? transform 屬性介紹 ? transform 屬性演示 ? transform 交互演示
// 水平鏡像翻轉
.div {transform:rotateY(180deg);}
// 垂直鏡像翻轉
.div {transform:rotateX(180deg);}outline 輪廓
輪廓是在元素周圍繪制的一條線，在邊框之外
// 簡寫:outline-width、outline-style、outline-color;偏移（outline-offset）要另寫 outline:1px solid red; outline-offset:15px; margin:50px;padding:20px;background:yellow;border:1px solid black; outline-width // 輪廓寬度 outline-style // 輪廓樣式 outline-color // 輪廓顏色 outline-offset // 輪廓與邊框（或邊緣）之間的距離附：border邊框樣式（border-style） 與 outline 輪廓樣式（outline-style）示例：
實線：solid
雙線：double
虛線：dashed
點線：dotted
凹槽：groove
凸槽：ridge
嵌入：inset
隆起：outset
恢復默認樣式：initial
font-size: initial; padding: initial; inherit（繼成） > initial（最初的）
前綴和后綴
// 添加前綴
div:before{content:"?";}
// 添加后綴
div:after{content:"?";}水平+垂直居中
居中元素設置絕對定位：position:absolute
.child {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
居中元素設置相對定位：position:relative;
.child {position:relative;margin-left:50%;margin-top:50%;transform:translate(-50%,-50%);}
小提示：前面-50%是水平方向，后面-50%是垂直方向
transform:translate(-50%,-50%)clip-path畫正六邊形
clip-path,自定義若干個端點位置來繪制一個形狀，一個元素的左上角坐標為(0 0)，右下角為(100% 100%)。 <section style="background:red;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);width:500px;height:calc(500px * 1.098);"></section>
