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);
}
这些伪类只适用于有范围限制的元素。 如果没有限制，则该元素不能在范围内或超出范围。
2. grayscale( ) 函数
你可以使用值 100% 将图像从彩色转换为黑白。 当将此值设置为 0% 时，你的图像将保持不变。
使用 100% 的值，你的图像转换为黑白，这意味着照片中将没有颜色。
你还可以使用 0 到 100% 之间的值来创建各种不同的效果。
CSS 代码：
.grayscale-image{
filter: grayscale(100%);
}
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