CSS不仅仅包含我们熟知的color,font-size等属性,还有不为人知的属性。今天我们来一起探讨这些神秘的属性。 /* 1. clip-path */ .element { clip-path:
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属性,为你的网站增添新的元素吧!
粉丝
0
关注
0
收藏
0