日常开发中那些「一招解决」的CSS小技巧，收藏这篇就够了！
前言
前端开发中，我们经常遇到「伪元素使用」「移动端样式兼容」「滚动条定制」等高频场景，每次都要翻笔记、查文档？这篇整理了15类最常用的CSS/Scss实战技巧，覆盖布局、兼容、样式定制、交互优化等场景，代码可直接复制使用，帮你节省80%的样式调试时间！
一、基础样式黑科技
1. 伪元素（::before/::after）通用写法
核心场景：生成装饰元素、清除浮动、模拟边框等
通用模板（必加属性，避免踩坑）：
/* 伪元素基础写法（适配所有场景） */
.box::after, .box::before {
content: ""; /* 伪元素必须加，空内容也不能省略 */
position: absolute; /* 脱离文档流，方便定位 */
/* 可选：根据场景补充 */
/* display: block; */
/* width: 100%; height: 100%; */
}
避坑点：
- 忘记写
content会导致伪元素不显示； - 未加
position: absolute时，伪元素会占用文档流空间，影响布局。
2. 文字排版高频技巧
| 需求场景 | 代码实现 | 适用场景 |
|---|---|---|
| 文字平稳换行（避免溢出） | word-break: break-all; | 长文本、中英文混合内容 |
| 文字强制不换行 | white-space: nowrap; | 按钮文字、单行标题 |
| 文字两端对齐 | text-align-last: justify; text-align: justify; text-justify: distribute-all-lines; | 导航栏、表单标签 |
/* 文字两端对齐（兼容IE/Chrome/Firefox） */
.text-justify {
text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines; /* IE专属兼容 */
}
3. 尺寸100%适配技巧
/* 页面/容器占满视口（无需嵌套父元素设置height:100%） */
.full-screen {
height: 100vh; /* 高度占满视口 */
width: 100vw; /* 宽度占满视口（慎用：可能出现横向滚动条，建议用100%） */
/* 替代方案（更安全） */
width: 100%;
min-height: 100vh;
}
/* 高度随内容撑开（继承父元素高度规则） */
.height-inherit {
height: inherit;
}
二、移动端兼容必看
1. 去除a标签点击高亮背景
/* 适配iOS/Android */
a, button, input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0); /* 标准写法 */
}
2. 解决移动端圆角渲染异常
场景：input/button等原生控件在移动端圆角显示不一致
.input-fix {
-webkit-appearance: none; /* 清除移动端原生样式 */
appearance: none; /* 标准写法 */
border-radius: 4px; /* 自定义圆角 */
}
3. 解决移动端/PC端文字大小不一致
/* 修复移动端文字缩放问题（经典偏方，实测有效） */
body {
max-height: 999999px;
-webkit-text-size-adjust: 100%; /* 禁止iOS文字自动缩放 */
text-size-adjust: 100%;
}
三、视觉美化技巧
1. 元素发光效果
/* 高亮发光（按钮/卡片hover效果） */
.glow-effect {
box-shadow: 0px 0px 20px #5D5C61; /* 灰色发光 */
/* 彩色发光示例（蓝色） */
/* box-shadow: 0px 0px 15px rgba(22, 93, 255, 0.6); */
}
2. 背景图片固定（视差效果）
/* 背景图片固定，滚动页面时背景不移动 */
.bg-fixed {
background: url("bg.jpg") no-repeat center center;
background-size: cover;
background-attachment: fixed; /* 核心属性 */
height: 500px; /* 必须设置高度，否则效果不生效 */
}
避坑点：background-attachment: fixed在移动端部分浏览器（如iOS Safari）不兼容，可通过JS模拟视差效果替代。
3. 自定义滚动条（美化必备）
/* Scss写法（Vue/React组件内） */
.scroll-custom {
width: 100%;
height: 40rem;
overflow-y: auto; /* 仅纵向滚动 */
/* 滚动条宽度/高度 */
&::-webkit-scrollbar {
width: 0.2rem;
height: 1px;
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #BDA065; /* 滑块颜色 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ffffff; /* 轨道颜色 */
}
}
兼容说明：仅支持Webkit内核浏览器（Chrome/Safari/Edge），Firefox需用scrollbar-color/scrollbar-width，IE需用原生样式。
四、媒体/视频样式优化
1. 图片保持比例裁剪适配
/* 图片裁剪填充（不拉伸，保持比例） */
.img-cover {
width: 100%;
height: 200px;
object-fit: cover; /* 核心属性：裁剪多余部分 */
/* 可选值：contain（完整显示）/ fill（拉伸）/ none（原图尺寸） */
}
2. 视频全屏/封面设置
/* 视频铺满容器 */
video {
width: 100%;
height: 100%;
object-fit: fill; /* 拉伸铺满（也可根据需求用cover） */
}
<!-- 视频添加封面 + 控制栏 -->
<video
src="video/53709159-1-6.mp4"
poster="images/video.png" <!-- 封面图片 -->
controls="true" <!-- 显示原生控制栏 -->
width="100%"
>
您的浏览器不支持HTML5视频播放
</video>
五、特殊场景技巧
1. 全站变灰色（哀悼/特殊节日）
/* 全局置灰（兼容所有浏览器） */
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* IE */
filter: grayscale(100%); /* 标准写法 */
_filter: none; /* IE6/7兼容 */
}
2. 全局加边界（调试布局）
/* 开发调试用：给所有元素加红色边框，定位布局问题 */
* {
outline: solid #f00 1px !important;
}
六、Scss组件内样式穿透（Vue/React）
场景：组件库样式覆盖（如Element Plus/Element UI/Ant Design）
| 写法 | 适用场景 | 注意事项 |
|---|---|---|
::v-deep | Vue3 + Scss/Less | 官方推荐 |
/deep/ | Vue2 + Scss/Less | 部分编译器需配置 |
>>> | Vue2 + 原生CSS | 不支持Scss/Less嵌套 |
/* Vue3组件内覆盖Element Plus样式 */
.el-button {
::v-deep .el-button__text {
color: #165DFF;
font-size: 14px;
}
}
/* Vue2兼容写法 */
.el-input {
/deep/ .el-input__inner {
border-radius: 4px;
}
}
总结
- 核心价值：这些技巧覆盖前端开发80%的样式场景，代码可直接CV，解决伪元素、移动端兼容、视觉美化等高频问题；
- 避坑重点：伪元素必须加
content、background-attachment: fixed移动端兼容、滚动条样式仅支持Webkit内核； - 使用建议：将高频技巧封装成CSS工具类（如
.text-justify/.img-cover），统一维护，提升团队开发效率。
你还遇到过哪些「一招解决」的CSS小技巧？评论区分享一下～
