CSS 开发干货｜8个冷门又好用的美化小技巧，告别重复样式

前言

很多前端开发者只会常用的基础CSS，其实有大量冷门、极简、高颜值的CSS属性。不需要复杂代码，就能优化页面布局、美化UI、提升质感。本篇分享8个实用CSS小技巧，适合PC端、移动端、后台管理系统。

一、文字自动换行（中英文通用）

解决长英文、长数字不换行问题。

div{
  word-break: break-all;
}

二、一行文字超出省略

.text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

三、两行文字超出省略（常用列表）

.text-two{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

四、图片不变形居中裁剪

做头像、封面图必备。

img{
  width:100px;
  height:100px;
  object-fit: cover;
}

五、简单实现磨砂玻璃效果

.glass{
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.2);
}

六、消除图片默认间距

img{
  vertical-align: middle;
}

七、纯CSS垂直水平居中（最简单写法）

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

八、滚动条美化（兼容主流浏览器）

::-webkit-scrollbar{
  width:6px;
  height:6px;
}
::-webkit-scrollbar-thumb{
  background:#ccc;
  border-radius:3px;
}

总结

以上8个CSS技巧是项目中最高频、最简单、最实用的写法。不用写复杂代码，就能优化页面美观度、减少bug、提升开发速度。建议收藏，做项目直接复制使用。