记录一些见得不多但意外地有用的CSS

神属性

scroll-behavior

scroll-behavior为可滚动元素指定滚动行为，不作用于用户行为，在根元素中指定这个属性时则适用于视窗

适用值：

  • auto：默认值
  • smooth：平滑滚动

animation-play-state

animation-play-state指定CSS动画的播放状态

适用值：

  • paused：暂停动画
  • running：恢复动画，会将从暂停时停止的位置继续运动，而不是从动画序列的开头重新播放

aspect-ratio

aspect-ratio指定首选宽高比

适用值：

  • auto：具有默认宽高比的元素会使用其默认宽高比，否则元素无首选宽高比
  • <ratio>：指定的宽高比，长/宽

mix-blend-mode

mix-blend-mode指定元素重叠的混合模式，类似绘图软件中的混合模式

  • normal：普通。就是顶色
  • multiply：乘法。顶色和底色相乘
  • screen：屏幕。将反转后的顶色和底色两个颜色相乘，再反转相加得到的和
  • overlay：覆盖。如果底色比顶色深则multiply，反之则screen
  • darken：变暗。每个颜色通道下，两层颜色中的最暗值所组成的颜色
  • lighten：变亮。每个颜色通道下，两层颜色中的最亮值所组成的颜色
  • color-dodge：减淡。底色除以顶色再反转
  • color-burn：烤印。反转底色除以顶色再反转
  • hard-light：强光。如果顶色比底色深则multiply，反之则screen
  • soft-light：柔光。两层颜色中较浅的颜色减去较深的颜色
  • difference：差值。更柔和的hard-light
  • exclusion：除法。对比度更低点的difference
  • hue：色相。顶色的色调+底色的饱和度和亮度
  • saturation：饱和。顶色的色调+底色的饱和度和发光度
  • color：色彩。顶色的色调和饱和度+底色的亮度
  • luminosity：亮度。顶色的亮度+底色的色调和饱和度

骚操作

文字描边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.text {
  font-size: 50px;
  color: white;
  /* 其实效果有点难看 */
  /* -webkit-text-stroke: 2px black; */
  /* 更好看且兼容性广泛的方式 */
  text-shadow: 
    2px 2px 0 black,
    2px 0px 0 black,
    2px -2px 0 black,
    0px 2px 0 black,
    0px -2px 0 black,
    -2px 2px 0 black,
    -2px 0px 0 black,
    -2px -2px 0 black  
}