🎉9 周年页面回顾

金数据 9 周年

• 使用 padding-bottom 撑高图片

  • 有时候会配合伪元素一起使用

• 使用伪元素实现复杂背景

• transform 中可以直接使用 perspective

• safari 浏览器中 transform 会导致 z-index 失效

  解决方法

  • 首先 translateZ 一个正数值，以 200px 为例
  • 然后使用 perspective（以 1800px 为例）减去 200px 得到 1600px
  • 最后 scale 1600/1800
  • ps: 可以再通过 translateX translateY 再微调一下位置即可
  • 原理就是：先将物体拉近，然后等比例缩小，这样看到的物体就与原来一样大，并且离人眼更近

• 移动端不能识别 font-weight 为 500 600 这样的加粗字体

• 使用伪元素代替 box-shadow 和 dashed 边框