CSS 幸福小片段：20+ 实用代码锦囊提升开发效率

前端开发中，CSS 代码片段是不可或缺的工具，它们可以帮助我们快速实现各种各样的效果，提升开发效率。本文精选了 20 余个高频使用的 CSS 代码片段，涵盖了文本框占位符样式、文本溢出控制、光标颜色修改、元素水平垂直居中等等。这些实用的小技巧，可以显著提升开发效率，让前端工程师的开发工作更轻松、更高效。

1. 修改 input placeholder 样式

input::-webkit-input-placeholder {
  color: #999;
}

2. 多行文本溢出

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示的行数 */
  -webkit-box-orient: vertical;
}

3. 修改光标颜色

input:focus {
  caret-color: #ff0000;
}

4. 水平垂直居中

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

5. 去除链接下划线

a {
  text-decoration: none;
}

6. 禁用链接

a {
  pointer-events: none;
}

7. 元素水平居中

.text-center {
  text-align: center;
}

8. 元素垂直居中

.vertical-align {
  vertical-align: middle;
}

9. 清除浮动

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

10. 隐藏元素

.hidden {
  display: none;
}

11. 显示元素

.visible {
  display: block;
}

12. 旋转元素

.rotate {
  transform: rotate(45deg);
}

13. 缩放元素

.scale {
  transform: scale(2);
}

14. 平移元素

.translate {
  transform: translate(100px, 100px);
}

15. 倾斜元素

.skew {
  transform: skew(10deg);
}

16. 模糊元素

.blur {
  filter: blur(5px);
}

17. 亮度元素

.brightness {
  filter: brightness(0.5);
}

18. 对比度元素

.contrast {
  filter: contrast(2);
}

19. 饱和度元素

.saturate {
  filter: saturate(5);
}

20. 色相元素

.hue-rotate {
  filter: hue-rotate(90deg);
}