前端开发都应该知道的十个强大的CSS属性

css不仅能够实现网站的外观和布局，还能通过一系列属性增强用户体验和交互性。本文将介绍10个鲜为人知但非常有趣的CSS属性，这10 个你可能不会经常使用或从未听说过的属性，但是你使用了之后相信你会爱上它们的。

自定义滚动条：美化滚动体验

网页上的滚动条都是相对普通和无趣的。然而，通过使用CSS的::-webkit-scrollbar伪元素，你可以改变滚动条的外观，包括宽度、颜色和形状。这让网站看起来更专业和个性化。

图片

我们用来::-webkit-scrollbar改变属性。

/* 设置滚动条的宽度 */
::-webkit-scrollbar {
    width: 10px;
}

/* 将滚动条轨道更改为蓝色并添加圆形边框 */
::-webkit-scrollbar-track {
    background-color: blue;
    border-radius: 10px;
}

/* 将滚动条拇指（显示滚动量）设为灰色并使其圆形 */
::-webkit-scrollbar-thumb {
    background: grey;
    border-radius: 10px;
}

/* 悬停在上方时使滚动条拇指变为深灰色 */
::-webkit-scrollbar-thumb:hover {
    background: darkgray;
}

图片

注意：这是一个非标准属性，需要使用-webkit-前缀，否则在某些浏览器中可能不起作用。

光标：改变鼠标悬停时的光标形状

光标属性允许你自定义鼠标悬停在元素上时的光标形状，这可以增强用户界面的交互性。你可以根据需要选择不同的光标样式。

/* 类名为 'first' 的元素 */
.first {
    cursor: not-allowed;
}

/* 类名为 'second' 的元素 */
.second {
    cursor: zoom-in;
}

/* 类名为 'third' 的元素 */
.third {
    cursor: crosshAIr;
}

图片

滚动行为：实现平滑滚动

平滑滚动效果可以让页面的滚动变得更加流畅和舒适，而不是瞬间切换到不同的页面部分。通过简单地添加以下代码，你就可以启用平滑滚动行为：

html {
  滚动行为：平滑；
}

它不是简单地将页面从一个部分捕捉到另一个部分，而是向上/向下滚动到该部分。

强调色：自定义表单元素颜色

使用accent-color属性，你可以自定义表单控件和复选框的颜色，使其与你的网站主题保持一致。这可以让你的用户界面更加吸引人和个性化。

图片

查看复选框和单选按钮的颜色如何为蓝色，而不是默认（且无聊）的灰色。

input {
    accent-color: blue;
}

这不会影响文本颜色，因此你可以灵活地设置不同输入元素的颜色以进行实验。

纵横比：保持响应性

在构建响应式设计时，保持元素的纵横比可能会成为一个挑战。这尤其重要，以确保图像和视频等元素不会被拉伸。通过设置宽高比属性，你可以轻松保持纵横比，而无需手动计算高度。

.example {
    /* 设置宽高比 */
    aspect-ratio: 1 / 0.25;
    /* 设置宽度后，高度会自动调整 */
    width: 200px;
    /* 边框不是必需的，仅用于演示 */
    border: 1px solid black;
}

现在我们设置了宽度，我们将自动获得等于 125 px 的高度，以保持宽高比。这对于响应行为非常有用。

图片

盒子反射：创建元素的反射

使用-webkit-box-reflect属性，你可以在元素下方创建反射效果，类似于镜像效果。这对于创建视觉上令人印象深刻的图形效果非常有用。

这将在元素下方创建一个反射效果。你还可以微调反射的偏移、不透明度和颜色。

/* 类名为 'example 的元素 */ 
.example { 
    /* 反射将出现在下面。其他可能的值如上 | 左| 右 */
     -webkit-box-reflect: 下面；
}

图片

我们还可以稍微抵消反射。

/* 类名为 'example 的元素 */ 
.example { 
    /* 反射将出现在下面。其他可能的值如上 | 左| 右 */
     -webkit-box-reflect: 低于20px ; 
}

图片

另外，我们希望它淡出一点。我们可以使用渐变色。

/* 类名为 'example 的元素 */ 
.example { 
    /* 反射将出现在下面。其他可能的值如上 | 左| 右 */
     -webkit-box-reflect：低于0px 线性渐变（到底部，rgba ( 0 , 0 , 0 , 0 ), rgba ( 0 , 0 , 0 ,. 5 )）；
}

图片

这是大多数主要浏览器（Firefox 除外）支持的非标准属性。

检查浏览器是否支持某个属性

为了确保你的CSS属性在各种浏览器中都能正常工作，你可以使用@supports规则进行检查。这允许你根据浏览器的支持情况提供不同的样式。

/* 检查浏览器是否支持 display: flex */
@supports (display: flex) {
    /* 如果支持，将显示设置为 flex */
    div {
        display: flex;
    }
}

虽然主要浏览器通常都支持大多数CSS属性，但某些非标准属性（如自定义滚动条和盒子反射）可能会在某些浏览器中不受支持。@supports使你能够为不同情况提供备用样式。

如果你输入 not 关键字，那么如果该属性不受支持，它将起作用。

@supports **not** (display: flex){/* If not supported *}

面具：使用图像蒙版

你可以使用mask属性将图像蒙版应用于元素。这允许你创建复杂的遮罩效果，根据图像的不同部分进行不同的裁剪。

.example {
    /* 使用URL设置蒙版 */
    -webkit-mask: url(YOUR URL);
    mask: url(YOUR URL);
}

遮罩图像中的白色部分表示遮罩，黑色部分表示要裁剪的区域。这为你提供了对元素的视觉控制。

滤镜：增强图像效果

你可以使用 CSS 向图像添加令人惊叹的滤镜。滤镜是我们在每个照片共享应用程序中都能看到的东西，现在，让我们看看它们的实现有多么容易

img {
    filter: blur(5px); /* 模糊效果 */
}

有许多可用的过滤器可以让你创建不同的视觉效果。你可以模糊、增亮和饱和滤镜。你可以将图像设为灰度、更改其不透明度、反转颜色等等。

正常图像（左）、模糊图像（中）和高对比度图像（右）

增亮图像（左）、灰度图像（中）和色调旋转图像（右）

背景效果：使用背景滤镜

使用backdrop-filter属性，你可以为图像后面的区域添加美观的滤镜，使背景看起来更吸引人。可以使用各种滤镜属性来调整背景效果。

<div class="image">
    <div class="effect">
        backdrop-filter: blur(5px);
    </div>
</div>

<style>
.image{
    background-image: url(YOUR URL);
    background-size: cover;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.effect{
    font-size: x-large;
    color: white;
    font-weight: 800;
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(5px);
    padding: 20px;
}
</style>

这样可以实现视觉上吸引人的背景效果:

图片