css技巧汇总

1.平滑滚动

html {
  scroll-behavior: smooth;
}

2.禁用textarea文本框调整大小

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

3.首字下沉

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

4.投影

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

5.居中div元素

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

6.改变输入框光标的颜色

input {
  caret-color: red;
}

7.禁止网页内容选中高亮

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

8.限制输入框值的范围

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

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

9.图像叠加

.image-overlay img:only-of-type:nth-child(1) {
  object-fit: cover;
  opacity: .4;
}

后续有新的会持续更新滴，谢谢