文字相关

文字间距
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%)