css日常踩坑

1.微信小程序中碰到 height:40rpx;line-height:40rpx;并不能上下居中

要实现如上效果，代码往简单写最开始想到用height跟line-height结合text-align实现居中效果：

  height: 40rpx;
  line-height:40rpx;
  width: 86rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #FFFFFF;
  background: #BDB6A9;
  letter-spacing: 1rpx;
  text-align: center;
  border: 4rpx solid #fff;
  border-radius: 8rpx;
  transform: rotate(-5deg);
  position: absolute;
  left: 64rpx;
  top: 86rpx;
  font-family: PingFangSC-Medium, PingFang SC;

　但实际上，文字不会居中，紧贴着下边框，然后因为高度固定了，尝试直接改变padding-top值，结果开发工具和真机表现不一致，无法统一。考虑是否font-weight:500; font-family: PingFangSC-Medium, PingFang SC;字体是苹果字体，安卓并不存在，造成行高改变不再是40rpx，自然改用padding自然也不能实现。之后改用flex布局实现

  height: 40rpx;
  width: 86rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #FFFFFF;
  background: #BDB6A9;
  display:flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 1rpx;
  text-align: center;
  border: 4rpx solid #fff;
  border-radius: 8rpx;
  transform: rotate(-5deg);
  position: absolute;
  left: 64rpx;
  top: 86rpx;
  font-family: PingFangSC-Medium, PingFang SC;

2.backdrop-filter背景模糊，背景过滤属性，是个非继承属性MDN上是这么说的：可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

backdrop-filter: blur(6rpx);

兼容性