一、文本处理
单行文字省略
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}多行文字省略
.text-ellipsis-multi {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 限制行数 */
}单词/数字不换行溢出
.text-wrap {
word-break: break-all;
word-wrap: break-word;
}文本两端对齐
.text-justify {
text-align-last: justify;
}字间距
.letter-spacing {
letter-spacing: 20px;
}识别字符串中的 \n 并换行
.pre-line {
white-space: pre-line;
}小于 12px 字体的实现
浏览器默认最小字号为 12px，通过
transform: scale()可以实现更小的字号
.font-size-8 {
display: inline-block;
font-size: 12px;
line-height: 1;
-webkit-text-size-adjust: none;
transform: scale(0.666);
}
.font-size-10 {
display: inline-block;
font-size: 12px;
line-height: 1;
-webkit-text-size-adjust: none;
transform: scale(0.833);
}富文本字体大小（防止 rem 转换）
.rich-text {
font-size: 14PX; /* 大写 PX 不会被 postcss-pxtorem 转换 */
line-height: 1.5em;
}二、布局技巧
偏移自身一半（常用于居中定位）
.center-offset {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}div 自动居中
.auto-center {
margin: auto;
width: fit-content;
}在 position: fixed 下居中
.fixed-center {
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
}flex 靠左或靠右
.flex-right {
margin-left: auto;
}
.flex-left {
margin-right: auto;
}防止 flex 子元素被压缩
.no-shrink {
flex-shrink: 0;
}九宫格布局
/* 方案一：Flex 布局 */
.grid-flex {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 100%;
height: 100%;
}
.grid-flex li {
width: calc((100% - 20px) / 3);
height: calc((100% - 20px) / 3);
margin-right: 10px;
margin-bottom: 10px;
}
.grid-flex li:nth-of-type(3n) {
margin-right: 0;
}
.grid-flex li:nth-of-type(n + 7) {
margin-bottom: 0;
}
/* 方案二：Grid 布局（更简洁） */
.grid-layout {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}calc 计算
.calc-width {
width: calc(100% - 80px);
}宽高比
.aspect-ratio {
aspect-ratio: 16 / 9;
}三、盒模型与边框
盒子模型
content-box（默认）：宽高只包含内容border-box：宽高包含内容 + padding + border
.border-box {
box-sizing: border-box;
}圆角效果
.rounded {
border-radius: 10px; /* 也可用百分比，如 50% 变圆形 */
}阴影效果
/* box-shadow: X轴 Y轴 模糊半径 扩展半径 颜色 投影方式 */
.shadow {
box-shadow: 1px 1px 10px -4px black;
}
/* 内阴影 */
.shadow-inset {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}边框图片
.border-img {
border-image: url(border.png) 50 round;
/* round: 平铺 | repeat: 重复 | stretch: 拉伸 */
}四、视觉效果
光标样式
.pointer {
cursor: pointer;
}对比度
.high-contrast {
filter: contrast(30);
}高斯模糊
.blur {
filter: blur(20px);
}只保留文字的背景（文字渐变效果）
.text-gradient {
background: linear-gradient(to right, #ff0000, #0000ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}延迟动画
.delay {
animation-delay: 0.5s;
}切割空间
.clip {
clip-path: inset(0px 50% 0 0);
}隐藏元素背面（3D 翻转时使用）
.hide-backface {
backface-visibility: hidden;
}设定透视深度（3D 效果）
.perspective {
perspective: 1000px;
}光环脉冲特效
.pulse {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #e093d1;
cursor: pointer;
box-shadow: 0 0 0 rgba(224, 147, 209, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(224, 147, 209, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(224, 147, 209, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(224, 147, 209, 0);
}
}五、常见样式重置
去除 a 标签下划线
a {
text-decoration: none;
}去除列表前缀符号
ul, ol {
list-style: none;
}去掉 input 聚焦发光
input:focus {
outline: none;
box-shadow: none;
}隐藏滚动条
.hide-scrollbar::-webkit-scrollbar {
display: none;
}阻止图片被拖动
img {
-webkit-user-drag: none;
}清除浮动（解决外边距溢出）
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
overflow: hidden;
}优先级最高（慎用）
.important {
color: red !important;
}六、伪元素
在元素内容前插入图片
.icon::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: url(icon.jpg) center / cover no-repeat;
}背景图片居中
.bg-center {
background: url(xxx) center center no-repeat;
background-size: cover;
}