一些实用的 css 技巧

一些实用的 css 技巧

黑白滤镜

在一些纪念日或者重要的人物离世的时候，会遇到把网页变成黑白色的需求

// 在想要变黑白的元素上加上该属性即可
.body {
  filter: grayscale(1);
}

图片的阴影

.body {
  // 针对整个区域做阴影效果，在图片想要做阴影效果时使用box-shadow达不到效果
  box-shadow: 0 0 10px #fff;
  // 针对这个区域内的像素点做阴影，透明的部分不管
  filter: drop-shadow(0 0 10px #fff);
}

改变文字的方向

示例

平滑滚动

.body {
  scroll-behavior: smooth;
}