平滑滚动

某些网站在转到不同的位置时，会发现页面是平滑滚动的，代码如下：

html{
  scroll-behavior: smooth;
}

但注意：在 Safari 中无效！

禁用 textarea 框调整

使用 resize 属性来防止 textarea 调整大小，也可将其限制为只能在水平或垂直上调整。

textarea.no-resize{
  resize: none; //可调整整体大小
}

textarea.horizontal-resize{
  resize: horizontal;  //只能水平调整大小
}

textarea.vertical-resize{
  resize: vertical;  //只能垂直调整大小
}

首字下沉

可用::first-letter 伪类对段落添加首字下沉效果。

::first-letter{
  font-size: 200%;
}

投影

可在透明图上使用 drop-shadow()滤镜效果，与 box-shadow 属性比，它的阴影效果更好。

img{
  filter: drop-shadow(0 0 3px #000);
}

div 居中

有时很难在页面上居中 div，用下面的代码就可以在页面上居中放置 div。

body{
  display: grid;
  place-items: center;
}

限制输入框范围

可以用小众的:in-range 和:out-of-range 伪类，验证 input 值是否在 min 和 max 指定的范围内，并用颜色做区分。

input:in-range {
  background: rgba(0, 255, 0, .25);
}

input:out-of-range {
  background: rgba(255, 0, 0, .25);
}