CSS 秘密武器：25 个小技巧，助你写出更优雅的代码！

大家好！我是宝哥！今天来跟大家分享 25 个 CSS 小技巧，这些可是我多年经验积累下来的宝贵财富，能让你的代码更简洁、更优雅，开发效率蹭蹭蹭地往上飙！

1. 垂直水平居中大法

还记得以前为了让一个元素在容器里居中，要写一大堆代码吗？现在，使用 Flexbox 就能轻松搞定！

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh;
}

2. 文字大小随视窗变化

想让文字大小根据屏幕大小自动调整吗？使用 vw 单位就可以实现响应式文字！

h1 {
  font-size: 5vw;
}

3. 保持元素的比例

想要让图片、视频或者其他元素保持固定的比例？用百分比填充就能做到！

.aspect-ratio-box {
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  position: relative;
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

4. 自定义复选框和单选按钮

默认的复选框和单选按钮看起来太单调了？我们可以用 CSS 来定制它们！

<label class="custom-checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
</label>

.custom-checkbox input {
  display: none;
}

.custom-checkbox .checkmark {
  width: 20px;
  height: 20px;
  background-color: #eee;
  border-radius: 4px;
}

.custom-checkbox input:checked + .checkmark {
  background-color: #2196F3;
}

5. 用 CSS Grid 打造复杂布局

CSS Grid 是网页布局的利器，可以轻松创建复杂的页面结构。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background-color: lightblue;
  padding: 20px;
}

6. 实现粘性页脚

让页脚始终固定在页面底部，看起来更专业！

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

7. 平滑滚动链接

点击链接，页面可以平滑滚动，体验更流畅！

html {
  scroll-behavior: smooth;
}

8. 让图片自适应大小

图片在不同设备上都能完美显示，这很重要！

img {
  max-width: 100%;
  height: auto;
}

9. 用省略号截断文本

文本溢出时，用省略号代替，避免显示混乱！

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 或任何宽度 */
}

10. 自定义滚动条

让滚动条更美观、更个性化！

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

11. 全屏背景图片

让背景图片充满整个屏幕，更具视觉冲击力！

.full-screen-bg {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
}

12. 动画渐变背景

让你的网站更活泼，更吸引眼球！

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(270deg, #ff7e5f, #feb47b);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

13. 添加图片覆盖层

为图片添加遮罩，营造更丰富的视觉效果。

.image-overlay {
  position: relative;
}

.image-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 黑色，透明度为 50% */
}

14. 图片悬停效果

为图片添加悬停效果，让你的网站更生动！

.image-hover img {
  transition: transform 0.3s;
}

.image-hover img:hover {
  transform: scale(1.1);
}

15. 使用 CSS 变量简化主题切换

方便快捷地修改网站主题，让你的网站更加灵活！

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

16. object-fit 控制图片显示方式

让图片在容器中完美显示，避免变形！

.fit-image {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 或 contain, fill, 等 */
}

17. 防止文本换行

防止文本自动换行，保持整齐美观！

.no-break {
  white-space: nowrap;
}

18. 让元素撑满父元素宽度

让元素占据父元素的全部宽度，方便布局！

.full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

19. 使用 CSS 控制 SVG 图标颜色

方便地改变内联 SVG 的颜色，无需修改代码！

.icon {
  fill: currentColor;
}

.icon-container {
  color: #ff6347;
}

20. 使用命名区域的 CSS Grid

构建更复杂、更灵活的 CSS Grid 布局！

.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar content'
    'footer footer';
  grid-gap: 10px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

21. CSS 过渡效果

为元素添加过渡效果，让页面更平滑、更自然！

.transition-button {
  background-color: #3498db;
  transition: background-color 0.3s;
}

.transition-button:hover {
  background-color: #2ecc71;
}

22. CSS 动画

让你的网页动起来，更生动有趣！

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bounce {
  animation: bounce 2s infinite;
}

23. 使用 CSS 创建不规则形状

突破矩形限制，创建更具创意的形状！

.clip-path {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: #3498db;
  width: 200px;
  height: 200px;
}

24. 实现深色模式

让你的网站更符合用户习惯，并提升用户体验！

:root {
  --bg-color: #fff;
  --text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #333;
    --text-color: #fff;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

25. CSS 计数器

轻松实现计数功能！

.counter-list {
  counter-reset: section;
}

.counter-list li::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

掌握这些 CSS 小技巧，你就可以写出更简洁、更优雅的代码，让你的网页开发更轻松，更愉快！

如需转载，请注明来自：前端开发博客 公众号

---

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

往期推荐

38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集

程序员必备：9 个超赞的速查表网站，2024 年开发效率翻倍！

Tailwind CSS v4.0 Alpha 发布：更快、更强大、更现代！

Vue 状态管理：从Vuex到Pinia，Vue 3官方推荐的状态管理库深度解析

Vue 如何处理异步组件加载错误

Vue 3 将推出新特性，可以抛弃虚拟DOM了！

微软 Edge 推出 "WebUI 2.0"：从 React 到 Web Components + HTML，速度提升了42%

我是前端宝哥，每日分享前端开发技术，关注下面二维码，围观我的朋友圈。

备注【文章群】可以进文章分享群，

备注【技术群】可以进技术交流群，

备注【副业群】可以进程序员副业群。

关注下方公众号加星标，送我的电子书资料

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF

• 回复「Vue脑图」获取 Vue 相关脑图

• 回复「思维图」获取 JavaScript 相关思维图

• 回复「简历」获取简历制作建议

• 回复「简历模板」获取精选的简历模板

• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。

• 回复「知识点」下载高清JavaScript知识点图谱

• 回复「读书」下载成长的相关电子书

觉得好看，请关注我，点“在看”