10 个必知必会的 CSS 小技巧改变输入框的光标颜色、3 行 CSS 将任意元素居中、1 行 CSS 添加平滑滚动、将

原文地址：10 CSS tips you need to know right now.

原文作者：Abhiraj Bhowmick

译文出自：掘金翻译计划

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

input {
  caret-color: red;
}

2. 3 行 CSS 将任意元素居中

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

3. 1 行 CSS 添加平滑滚动

html {
  scroll-behavior: smooth;
}

4. 将任意图片添加到页面标题以创建炫酷的效果

h1 {
  background: blue url("image.jpg");
  backgroud-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-top: 20px;
  font-size: 120px;
}

@media(max-width: 600px) {
  h1 {
    font-size: 45px;
  }
}

5. 纯 CSS 实现多行文字截断

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

6. 使任意元素可缩放

.resize {
  resize: both;
}

7. 将图片作为鼠标样式

.my-cursor {
  cursor: url("image.png"), auto;
}

8. 平滑滚动动画

html {
  scroll-behavior: smooth;
}

9. 启用混合模式

body {
  background-image: url("image.jpg");
  background-color: purple;
  background-blend-mode: screen;
}

10. 设置处于高亮状态时的样式

carbon (5).png

p::selection {
  background-color: pink;
  color: rgb(235, 23, 41);
}

感谢阅读！