足球护具有哪些_布鲁特_310竞彩足球推荐专家预测_-90vs即时比分 - nba得分榜历史排名

文字相關

文字間距
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);

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;  //啟動
}

? 詳細的animation 動畫介紹請點擊！

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           // 輪廓與邊框（或邊緣）之間的距離

實線：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%)