10 个实用的 CSS 技巧

1. 平滑滚动

2. 防止<textarea>调整大小

3. 首字下沉

4.阴影

5. 将任意<div>元素置于中心

6.输入插入符号颜色

7. 防止高亮

8. 输入范围伪类

9.图像叠加

10.transition房产

这 10 个 CSS 小技巧确实能帮到你。如果你想了解更多技巧，请在评论区留言。

1. 平滑滚动

当你访问某些网站并尝试切换不同的版块时，它会平滑地滚动到该版块。你只需使用一行 CSS 代码即可在你的网站上实现此功能。

注意：这在 Safari 中不起作用！

html {
  scroll-behavior: smooth;
}

实例

2. 防止<textarea>调整大小

您可以使用该resize属性来防止<textarea>元素被调整大小（或将其限制在一个轴上）。

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

实例

3. 首字下沉

您可以使用伪元素为段落添加首字下沉::first-letter。

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

实例

4.阴影

您可以在透明图像上使用drop-shadow()滤镜效果。它能提供比使用属性更好的阴影效果box-shadow。

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

实例

5. 将任意<div>元素置于中心

<div>有时，将元素居中放在页面上可能很困难，但有了本技巧，问题就迎刃而解了。<div>只需几行 CSS 代码，即可将任何元素居中放在页面上。

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

实例

6.输入插入符号颜色

您可以使用该caret-color属性来更改输入字段插入符号的颜色。

input {
  caret-color: red;
}

实例

7. 防止高亮

这个与＃2类似，但是您可以使用该user-select属性来防止元素被用户突出显示。

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

实例

8. 输入范围伪类

鲜为人知的:in-range和:out-of-range伪类可以帮助您验证元素的当前值是否在其和属性<input>指定的范围内。minmax

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

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

实例

9.图像叠加

你可以使用该属性创建图像叠加层object-fit。当你想在网站上创建英雄图像时，这会非常有用。

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

实例

10.transition房产

你可能已经知道这一点了，但如果我告诉你，有一种方法可以在不使用关键帧的情况下为元素设置动画呢？该transition属性允许你定义元素两种状态之间的过渡。它主要用于悬停动画。

a {
  color: #0d6efd;
  text-decoration: none;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}

a:hover {
  color: #0a58ca;
}

实例