广州蓝景分享—14个非常实用的CSS属性技巧

Hello~~各位小伙伴，在学习前端时，样式表CSS功能也是非常强大的，它有一些惊人的隐藏方法与技巧，可以用来改善我们开发网站的外观。

今天这篇文章，小蓝将与大家分享一些实用的 CSS知识技巧，希望对你在学习工作中有所帮助。

好了，我们现在开始吧。

1. CSS :in-range 和 :out-of-range 伪类

这些伪类用于对指定范围内/外的输入进行样式设置。

(a) :in-range

如果 input 元素的当前值在 min 和 max 属性的范围之间，则 input 元素在范围内。

这个伪类可以很容易地确定一个字段的当前值是否可以接受。

(b) :out-of-range

如果 input 元素的当前值超出了 min 和 max 属性的范围，则 input 元素超出范围。

如果字段值超出其范围，它会给用户一个视觉指示。

CSS 代码：

/* in-range */
input:in-range{
   
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
   
background-color: rgba(255, 0, 0, 0.25);
}
1
2
3
4
5
6
7
8
9
10

这些伪类只适用于有范围限制的元素。 如果没有限制，则该元素不能在范围内或超出范围。

2. grayscale( ) 函数

你可以使用值 100% 将图像从彩色转换为黑白。 当将此值设置为 0% 时，你的图像将保持不变。

使用 100% 的值，你的图像转换为黑白，这意味着照片中将没有颜色。

你还可以使用 0 到 100% 之间的值来创建各种不同的效果。

CSS 代码：

.grayscale-image{
   
filter: grayscale(100%);
}
1
2
3
4

3.玻璃效果

使用几行代码将玻璃效果添加到你的下一个项目中。 是的，这真的很容易， 玻璃效果很漂亮，为你的设计增添优雅。

Glass.CSS(https://css.glass/) 是最流行的 glassmorphism 生成器，你可以在其中免费为你的项目创建 CSS Glass Effects。 你需要做的就是根据需要调整一些设置并将 CSS 代码复制粘贴到你的项目中。

CSS 代码：

.glass-effect{
   
-webkit-backdrop-filter: blur(6.2px);
backdrop-filter: blur(6.2px);
background: rgba(255, 255, 255, 0.4);
border-radius
1
2
3
4
5