css3 压扁效果

CSS3 压扁效果可以用来实现元素被压扁的视觉效果，使得元素看起来更加扁平化。下面是一个实现该效果的代码：

.box {
      width: 200px;
      height: 150px;
      background-color: #f2f2f2;
      box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      transform: skew(-10deg);
      margin: 50px auto;
}
    

该代码中首先定义了一个宽度为200px，高度为150px的box元素，并设置了背景色和阴影样式。然后通过border-radius属性定义了元素的圆角半径为10px。

其中transform: skew(-10deg)属性实现了元素的压扁效果，将元素倾斜了10度。

最后使用margin属性将元素居中对齐。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！