CSS小知识，分享14个你可能还未用上但又实用的CSS属性（上）-51CTO.COM

一、:in-range 和 :out-of-range 伪类

:in-range 和 :out-of-range 是 CSS 中的伪类，它们可以用来样式化表单控件中的输入值。
:in-range 表示当前输入值位于 min 和 max 属性之间，可以使用它来样式化合法输入值。
:out-of-range 则表示当前输入值不在 min 和 max 属性之间，可以使用它来样式化非法输入值。

下面我们来看一段示例，如下代码所示：

HTML部分：

<form>
    <label for="age">年龄</label>
    <input type="number" id="age" name="age" min="18" max="65" required>
</form>

CSS部分：

input[type="number"]:in-range {
    background-color: green;
}
input[type="number"]:out-of-range {
    background-color: red;
}

上面这个示例中，我们有一个简单的表单，其中包含一个数字类型的输入框，它有一个最小值和最大值限制( min='18', max='65' )。如果用户在输入框中输入的值在这个范围内，则背景颜色变为绿色；如果不在这个范围内，则背景颜色变为红色。

注：:in-range 和 :out-of-range 伪类是在最新版本的浏览器中支持的，包括 Chrome、Firefox、Edge、Safari。在这些浏览器中都可以使用这两个伪类来样式化表单控件中的输入值，并且在这些浏览器中都能正常工作。另外，需要注意的是，这两个伪类只能应用于 input[type='number'] , input[type='range'] 和 input[type='date'] 上，而不能应用于其他类型的表单控件上。所以如果你想要使用这两个伪类,需要考虑兼容性问题

二、grayscale( ) 颜色变换属性

grayscale( ) 是 CSS 中的一种颜色变换属性，用来将图像变成灰度图。它可以使用在任何元素上，但最常用于 <img> 元素。

语法：

img {
    filter: grayscale(value);
}

value 是一个百分数值，表示图像的灰度程度。 0% 表示图像不变，100% 表示图像完全变成灰度图。

示例代码：

img {
    filter: grayscale(50%);
}

上面这个示例中，所有的 <img> 元素都会变成灰度图，灰度程度为 50%。

注意：这个属性需要在浏览器中使用 filter 属性，并且在老版本的浏览器中可能不能使用，所以需要兼容性的处理。另外，在需要支持无障碍访问的场景下，使用这个属性可能会导致阅读障碍，所以需要在使用时注意可访问性。

三、Glass Effect 毛玻璃效果

Glass Effect 效果是一种通过模拟玻璃材质的效果，在 CSS 中可以通过多种方式实现。

方法一：一种常见的实现方式是使用伪元素和渐变颜色，示例代码如下:

.glass-effect {
    position: relative;
    overflow: hidden;
}
.glass-effect::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(image.jpg);
    filter: blur(5px);
}

上面的代码中, 我们使用伪元素:before ,并将其设置在容器的上面，使用渐变颜色和模糊效果来模拟玻璃的效果,通过改变渐变的颜色，模糊的程度来实现不同的效果。

注意事项：

需要在浏览器中支持 filter 属性
需要兼容性的处理
在需要支持无障碍访问的场景下，使用这个效果可能会导致阅读障碍，所以需要在使用时注意可访问性。

不同的场景需要调整不同的参数来实现不同的效果，可以尝试使用其他的属性组合来实现不同的效果。

方法二：使用 backdrop-filter 属性

backdrop-filter 属性是一个CSS属性, 可以在元素后面应用滤镜效果. 使用方法类似于 filter 属性, 但是它应用于元素的背景.

.glass-effect{
   -webkit-backdrop-filter: blur(6.2px);
   backdrop-filter: blur(6.2px);
   background: rgba(255, 255, 255, 0.4);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.24); 
}

css.glass 这个网站，目前是最流行的玻璃效果在线代码生成器，您可以免费使用这个工具创建 CSS 玻璃效果。您需要做的就是根据您的需要调整一些设置，然后将 CSS 代码复制粘贴到您的项目中。

四、常用的文本样式设置属性

这些是每个人都应该知道的一些非常基本的文本样式技巧。但是，还有许多其他高级选项可用。

p{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
  text-align: center;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 2px;
}

五、clamp( ) 属性

clamp() CSS 函数将值限制在定义的最小边界和最大边界之间的值范围内。该函数采用三个参数：最小值、首选值和最大允许值。

语法：

property: clamp(min, val, max);

min 是长度值的最小值， max 是最大值， value 是初始首选值。 clamp( ) 函数会返回一个值，该值大于等于 min 且小于等于 max。

例如当字体大小根据视口改变时，Clamp() 会派上用场。

示例代码：

p{
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

这个字体大小，默认为 2.5vw 的大小，当视口发生变化时，最小为1.8rem，最大为2.8rem。如果计算的值在1.8~2.8rem之间，则使用自适应值 2.5vw。

六、水平垂直居中

开发人员最重要的任务是使 div 居中。还有很多其他选项可以让 div 居中。在此示例中，我们使用 CSS flexbox 将 div 水平和垂直居中。

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

七、CSS线性渐变

在 CSS 中可以使用 linear-gradient() 函数来实现线性渐变效果。

结束语

今天的上半部分的分享就到这里，感谢你的阅读，下一篇文章我将会继续分享剩下的7个属性，敬请期待。