文字相關(guān)

文字間距
letter-spacing: 2px;

強(qiáng)制為大寫字母
text-transform: uppercase;
強(qiáng)制為小寫字母
text-transform: lowercase;

不允許換行
white-space: nowrap;

=== 文字豎向排列 ===
默認(rèn)：水平方向，從上到下
writing-mode:horizontal-tb;
垂直方向，從右向左
writing-mode:vertical-rl;
垂直方向，從左向右
writing-mode:vertical-lr;

小技巧：圖片結(jié)合writing-mode垂直方向，加上text-align:center，可實(shí)現(xiàn)圖片垂直居中；
再結(jié)合margin: auto實(shí)現(xiàn)圖片上下左右中心居中效果。

SVG相關(guān)

// SVG自由縮放寬高
<svg preserveAspectRatio="none" ……>

// SVG引用
<svg id="svg001" style="…"> …… </svg>                   // 完整的SVG文件，定義ID為：svg001
<svg style="…"> <use xlink:href="#svg001"> </svg>       // 直接引用上方ID，xlink:href="#svg001"，可以自定義其它樣式

鼠標(biāo)相關(guān)

// 關(guān)閉層上鼠標(biāo)事件
pointer-events: none;

// 開啟層上鼠標(biāo)事件
pointer-events: auto;

// 禁止鼠標(biāo)拖拽、選中文字
user-drag:none;user-select:none;

// 允許鼠標(biāo)拖拽、選中文字
user-drag:auto;user-select:auto;

// 鼠標(biāo)樣式示例：鼠標(biāo)手型
cursor: pointer;

// 各種CSS鼠標(biāo)樣式 //      
default                         默認(rèn)光標(biāo)（通常是一個(gè)箭頭）
auto                            默認(rèn)。瀏覽器設(shè)置的（user agent stylesheet）光標(biāo)
crosshair                       光標(biāo)呈現(xiàn)為十字
pointer                         光標(biāo)呈現(xiàn)為指示鏈接的指針（一只小手）
move                            此光標(biāo)指示某對(duì)象可被移動(dòng)（帶箭頭的十字）
e-resize                        此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)
ne-resize                       此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）
nw-resize                       此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）
n-resize                        此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)
se-resize                       此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）
sw-resize                       此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）
s-resize                        此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）
w-resize                        此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）
text                            此光標(biāo)指示文本
wait                            此光標(biāo)指示程序正忙（通常是一只表或沙漏，或者一個(gè)圈在那轉(zhuǎn)）
help                            此光標(biāo)指示可用的幫助（通常是一個(gè)問號(hào)或一個(gè)氣球）

自定義字段函數(shù)

: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

// 從上到下，藍(lán)色漸變到紅色
linear-gradient(blue, red)

// 功能完整的示例，注：下面的百分比“xxx%”指的是某個(gè)色彩的位置節(jié)點(diǎn)，不是色彩段長(zhǎng)度。
background-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

radial-gradient() 徑向顏色漸變（模擬圖片）

// 顏色結(jié)點(diǎn)不均勻分布
background-image: radial-gradient(red 5%, green 15%, blue 60%);

// 圓形徑向漸變
background-image: radial-gradient(circle, red, yellow, green);

// 不同尺寸大小關(guān)鍵字的使用
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);

animation 動(dòng)畫

/* keyframes 定義動(dòng)畫 */
@keyframes myname<動(dòng)畫名稱>{
    0%{opacity:0;}
    50%{opacity:.8;}
    100%{opacity:0;}
}

/* animation 調(diào)用動(dòng)畫 */
mydiv {
animation:myname 2s ease 1s infinite<循環(huán)> reverse<反向> both>;
動(dòng)畫名稱 + 持續(xù)時(shí)間 + 運(yùn)動(dòng)曲線 + 延遲時(shí)間 + 播放次數(shù) + 是否反向 + 動(dòng)畫起始或終止?fàn)顟B(tài)
}

/* animation 動(dòng)畫暫停與啟動(dòng) */
mydiv:hover{
    animation-play-state:paused;  //暫停
    animation-play-state:running;  //啟動(dòng)
}

? 詳細(xì)的animation 動(dòng)畫介紹請(qǐng)點(diǎn)擊！

transform 變形

? transform 屬性介紹 ? transform 屬性演示 ? transform 交互演示

// 水平鏡像翻轉(zhuǎn)
.div {transform:rotateY(180deg);}  

// 垂直鏡像翻轉(zhuǎn)
.div {transform:rotateX(180deg);}

outline 輪廓
輪廓是在元素周圍繪制的一條線，在邊框之外

// 簡(jiǎn)寫: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           // 輪廓與邊框（或邊緣）之間的距離

實(shí)線：solid
雙線：double
虛線：dashed
點(diǎn)線：dotted
凹槽：groove
凸槽：ridge
嵌入：inset
隆起：outset

恢復(fù)默認(rèn)樣式：initial

font-size:  initial;
padding:  initial;
inherit（繼成） > initial（最初的）

前綴和后綴

// 添加前綴
div:before{content:"?";}

// 添加后綴
div:after{content:"?";}

水平+垂直居中

居中元素設(shè)置絕對(duì)定位：position:absolute
.child {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

居中元素設(shè)置相對(duì)定位：position:relative;
.child {position:relative;margin-left:50%;margin-top:50%;transform:translate(-50%,-50%);}

小提示：前面-50%是水平方向，后面-50%是垂直方向
transform:translate(-50%,-50%)