大家好，我是大华！今天给大家分享一些比较实用的CSS技巧，不管你是前端新手还是老司机，这些技巧都能让你的开发效率翻倍！废话不多说，直接上代码了。
1. 使用变量维护主题色
/* 定义CSS变量 */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
}
/* 使用变量 */
.button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
.card {
border: 1px solid var(--secondary-color);
color: var(--text-color);
}
适用场景：需要维护统一设计规范的项目，方便快速切换主题
2. Flex布局居中（终极解决方案）
.center-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 视口高度 */
}
/* 如果只需要单方向居中 */
.vertical-center {
display: flex;
align-items: center; /* 仅垂直居中 */
}
.horizontal-center {
display: flex;
justify-content: center; /* 仅水平居中 */
}
适用场景：任何需要居中的布局，特别是响应式设计
3. Grid网格布局
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3等分列 */
grid-gap: 20px; /* 网格间距 */
padding: 20px;
}
.grid-item {
background: #f0f0f0;
padding: 20px;
border-radius: 8px;
}
/* 响应式网格 */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* 小屏幕2列 */
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr; /* 超小屏幕1列 */
}
}
适用场景：复杂布局、卡片布局、图片画廊
4. 自定义滚动条
.custom-scrollbar {
width: 300px;
height: 200px;
overflow-y: scroll;
padding: 10px;
}
/* Webkit浏览器滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道背景 */
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #c1c1c1; /* 滑块颜色 */
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #a8a8a8; /* 悬停颜色 */
}
适用场景：需要统一浏览器滚动条样式的项目
5. 文字渐变效果
.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text; /* 关键：背景裁剪到文字 */
-webkit-text-fill-color: transparent; /* 关键：文字透明 */
background-clip: text;
font-size: 3rem;
font-weight: bold;
}
适用场景：标题设计、品牌文字、特色展示
6. 毛玻璃效果
.frosted-glass {
background: rgba(255, 255, 255, 0.25); /* 半透明背景 */
backdrop-filter: blur(10px); /* 背景模糊 */
-webkit-backdrop-filter: blur(10px); /* Safari支持 */
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
padding: 20px;
color: white;
}
适用场景：现代设计风格、卡片悬浮效果、导航栏
7. 悬浮阴影动画
.card {
background: white;
border-radius: 10px;
padding: 20px;
transition: all 0.3s ease; /* 所有属性过渡0.3秒 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.card:hover {
transform: translateY(-5px); /* 悬浮上移5px */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 阴影加深 */
}
适用场景：卡片设计、按钮交互、产品展示
8. 自定义复选框
/* 隐藏原生复选框 */
.custom-checkbox input[type="checkbox"] {
display: none;
}
/* 自定义复选框样式 */
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 16px;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 4px;
margin-right: 10px;
position: relative;
transition: all 0.3s ease;
}
/* 选中状态 */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-label .checkmark {
background: #3498db;
border-color: #3498db;
}
/* 选中后的对勾 */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-label .checkmark::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
适用场景：表单美化、统一设计语言
9. 图片悬浮放大
.image-container {
width: 300px;
height: 200px;
overflow: hidden; /* 隐藏溢出部分 */
border-radius: 8px;
}
.zoom-image {
width: 100%;
height: 100%;
object-fit: cover; /* 保持图片比例 */
transition: transform 0.5s ease; /* 缩放过渡 */
}
.zoom-image:hover {
transform: scale(1.1); /* 悬浮放大1.1倍 */
}
适用场景：产品图集、相册、作品展示
10. 文字阴影效果
.text-shadow {
font-size: 3rem;
font-weight: bold;
color: #2c3e50;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 水平 垂直 模糊 颜色 */
}
/* 多层阴影效果 */
.multi-shadow {
font-size: 3rem;
font-weight: bold;
color: #e74c3c;
text-shadow:
1px 1px 0 #c0392b,
2px 2px 0 #922b21,
3px 3px 5px rgba(0, 0, 0, 0.6);
}
适用场景：标题设计、文字特效、海报设计
11. 渐变边框
.gradient-border {
padding: 20px;
border: 4px solid;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
border-radius: 8px;
background: white;
}
/* 另一种实现方式 */
.gradient-border-alt {
padding: 20px;
background:
linear-gradient(white, white) padding-box,
linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
border: 4px solid transparent;
border-radius: 8px;
}
适用场景：特色边框、高亮元素、品牌标识
12. 粘性定位
.sticky-header {
position: sticky;
top: 0; /* 距离顶部0时固定 */
background: white;
padding: 15px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000; /* 确保在最上层 */
}
.sticky-sidebar {
position: sticky;
top: 100px; /* 距离顶部100px时固定 */
align-self: start; /* Grid布局中对齐 */
}
适用场景：导航栏、侧边栏、表头固定
13. 文字溢出省略
/* 单行文字溢出显示省略号 */
.single-line-ellipsis {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏溢出 */
text-overflow: ellipsis; /* 显示省略号 */
width: 200px;
}
/* 多行文字溢出显示省略号 */
.multi-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示3行 */
-webkit-box-orient: vertical;
overflow: hidden;
width: 300px;
}
适用场景：标题截断、内容摘要、表格单元格
14. 自定义选择文本样式
::selection {
background: #3498db; /* 选中背景色 */
color: white; /* 选中文字颜色 */
text-shadow: none; /* 去除文字阴影 */
}
/* 针对不同浏览器前缀 */
::-moz-selection {
background: #3498db;
color: white;
text-shadow: none;
}
适用场景：提升用户体验、品牌一致性
15. 滤镜效果
.image-filters {
transition: filter 0.3s ease;
}
/* 灰度效果 */
.grayscale {
filter: grayscale(100%);
}
.grayscale:hover {
filter: grayscale(0%);
}
/* 多个滤镜组合 */
.multiple-filters {
filter: brightness(1.2) contrast(0.8) saturate(1.5);
}
/* 模糊效果 */
.blur-effect {
filter: blur(2px);
}
适用场景：图片特效、主题切换、视觉设计
16. 动画关键帧
@keyframes bounce {
0%, 100% {
transform: translateY(0); /* 起始和结束位置 */
}
50% {
transform: translateY(-20px); /* 跳起位置 */
}
}
.bouncing-element {
animation: bounce 2s ease-in-out infinite; /* 动画名称 时长 缓动 重复 */
}
/* 加载动画 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
适用场景：加载动画、交互动效、注意力引导
17. 响应式图片
.responsive-image {
max-width: 100%; /* 最大宽度100% */
height: auto; /* 高度自动 */
display: block; /* 块级元素 */
}
/* 保持比例的容器 */
.aspect-ratio-box {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9比例 (9/16=0.5625) */
position: relative;
overflow: hidden;
}
.aspect-ratio-box img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover; /* 覆盖整个容器 */
}
适用场景：响应式网站、图片画廊、产品展示
18. 三角形绘制
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3498db;
}
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #e74c3c;
}
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #2ecc71;
}
适用场景：工具提示、下拉箭头、装饰元素
19. 文字描边效果
.text-stroke {
font-size: 3rem;
font-weight: bold;
color: white;
-webkit-text-stroke: 2px #3498db; /* 描边宽度和颜色 */
text-stroke: 2px #3498db;
}
/* 兼容写法 */
.text-stroke-alt {
font-size: 3rem;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px #3498db;
text-shadow: none;
}
适用场景：标题设计、海报文字、特色展示
20. 混合模式
.blend-mode {
background-image: url('background.jpg');
background-size: cover;
}
.blend-mode::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #3498db;
mix-blend-mode: overlay; /* 叠加混合模式 */
}
/* 图片混合模式 */
.image-blend {
background:
linear-gradient(45deg, #ff6b6b, #4ecdc4),
url('image.jpg');
background-blend-mode: overlay;
background-size: cover;
}
适用场景：创意设计、图片处理、视觉效果
总结
这20个CSS技巧包含了现代最常见的开发需求，从布局到动画，从响应式到视觉效果。掌握这些技巧，你就能应对90%的日常开发需求。
其中有几点比较关键：
-
变量管理让维护更轻松
-
Flex/Grid是布局的首选
-
过渡和动画提升用户体验
希望这些技巧能帮助你在开发中事半功倍！
本文首发于公众号：程序员刘大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！
📌往期精彩
《SpringBoot+Vue3 整合 SSE 实现实时消息推送》
《这20条SQL优化方案，让你的数据库查询速度提升10倍》
《SpringBoot 动态菜单权限系统设计的企业级解决方案》
《Vue3 + ElementPlus 动态菜单实现：一套代码完美适配多角色权限系统》
登录
