12个CSS高级技巧汇总

1. 使用object-fit调整图片大小

object-fit是一个CSS属性，它可以帮助我们调整图片的大小并适应父元素的大小。比如，我们可以将一个宽高比与父元素不同的图片，通过object-fit: cover属性来实现填充整个父元素，并裁剪掉多余部分。

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

2. 使用display: grid布局

display: grid是一个CSS属性，它可以帮助我们更便捷的实现网格布局。我们可以通过grid-template-columns属性来定义每列的宽度，通过grid-template-rows属性来定义每行的高度。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

3. 使用filter属性调整图片颜色

filter是一个CSS属性，它可以帮助我们调整图片的颜色、透明度、模糊度等属性。比如，我们可以通过filter: grayscale(100%)将一张彩色图片变成黑白图片。

img {
  filter: grayscale(100%);
}

4. 使用position: sticky固定元素位置

position: sticky是一个CSS属性，它可以帮助我们实现元素在滚动时固定在指定位置。比如，我们可以将一个导航栏固定在页面顶部，直到页面滚动到一定位置：

.nav {
  position: sticky;
  top: 0;
}

5. 使用transform属性改变元素形态

transform是一个CSS属性，它可以帮助我们修改元素的形态。比如，我们可以通过transform: skewX(30deg)将一个矩形变成一个斜向的梯形。

div {
  width: 100px;
  height: 50px;
  background-color: red;
  transform: skewX(30deg);
}

6. 使用background-attachment: fixed实现固定背景图片

background-attachment: fixed是一个CSS属性，它可以帮助我们实现固定的背景图片。比如，我们可以将一个背景图片固定在页面的底部，并随着页面滚动而滚动。

body {
  background-image: url('bg.jpg');
  background-attachment: fixed;
  background-position: center bottom;
}

7. 使用clip-path裁剪元素形状

clip-path是一个CSS属性，它可以帮助我们裁剪元素的形状。比如，我们可以通过clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%)将一个矩形裁剪成一个梯形。

div {
  width: 100px;
  height: 50px;
  background-color: red;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

8. 使用overflow: hidden隐藏元素内容

overflow: hidden是一个CSS属性，它可以帮助我们隐藏元素的溢出内容。比如，我们可以通过将一个超出容器的元素设置overflow: hidden来实现隐藏溢出部分。

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

9. 使用box-shadow实现投影效果

box-shadow是一个CSS属性，它可以帮助我们实现元素的投影效果。比如，我们可以通过box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)将一个元素添加一个阴影。

div {
  width: 100px;
  height: 50px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

10. 使用text-shadow实现文本投影效果

text-shadow是一个CSS属性，它可以帮助我们实现文本的投影效果。比如，我们可以通过text-shadow: 1px 1px 1px black将一段文本添加一个投影。

p {
  text-shadow: 1px 1px 1px black;
}

11. 使用user-select禁用文本选择

user-select是一个CSS属性，它可以帮助我们控制文本的选择功能。比如，我们可以通过将一个元素设置user-select: none来禁止选择其中的文本。

div {
  user-select: none;
}

12. 使用backdrop-filter实现背景模糊

backdrop-filter是一个CSS属性，它可以帮助我们实现背景模糊的效果。比如，我们可以通过backdrop-filter: blur(10px)将一个元素的背景模糊。

div {
  background-image: url('bg.jpg');
  backdrop-filter: blur(10px);
}