[分享]css不为人知的属性

CSS不仅仅包含我们熟知的color，font-size等属性，还有不为人知的属性。今天我们来一起探讨这些神秘的属性。

 /* 1. clip-path */

  .element {
     clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  }

  /* 2. perspective */

  .parent {
     perspective: 1000px;
  }

  /* 3. text-shadow */

  h1 {
     text-shadow: 2px 2px 2px #000000;
  }

  /* 4. scroll-snap-type */

  .container {
     scroll-snap-type: y mandatory;
  }

  /* 5. backdrop-filter */

  .element {
     backdrop-filter: blur(5px);
  } 

以上是五种不为人知的CSS属性。下面我们来逐一解释。

1. clip-path:可以用来截取一个元素的形状，在某些情况下可以取代普通的border。在上面的代码中，我们以四个点的坐标来绘制一个梯形形状的clip-path。

2. perspective:该属性用于制作3D效果，定义了元素被看作是处于何处的平面。在上方的代码中，我们将.plant元素的视角设为1000px。

3. text-shadow:在文字的背景上添加阴影效果。在上面的代码中，我们将h1元素的文字添加了黑色的阴影效果。

4. scroll-snap-type:该属性用于定义一个滚动容器，指定滚动结束时（使用滚动条、手势等）元素如何停靠。在上面的代码中，我们将滚动容器的滚动类型设为y轴方向，并指定必须停靠到某处。

5. backdrop-filter:该属性能够在元素的背景上添加模糊或颜色滤镜效果。在上面的代码中，我们将表格内的内容添加了一个5px的背景模糊效果。

总结起来，这些CSS属性可能并不为人所知，但如果你能运用它们，将会有不一样的视觉效果。在开发网站时，尝试使用不同的CSS属性，为你的网站增添新的元素吧！