mkimq

每个前端开发需要了解的CSS属性

自定义滚动条

让我们改变滚动条的宽度和颜色，还让它稍微变得圆润一些。

/* 设置滚动条的宽度 */
::-webkit-scrollbar{
  width: 10px;
}
/* 将轨道改为蓝色并设置圆角边框 */
::-webkit-scrollbar-track{
  background-color: blue;
  border-radius: 10px;
}
/* 将滑块（显示滚动量）改为灰色并设置圆角 */
::-webkit-scrollbar-thumb{
  background: gray;
  border-radius: 10px;
}
/* 悬停时显示为深灰色 */
::-webkit-scrollbar-thumb:hover{
  background: darkgray;
}

Scroll behavior

滚动行为可以实现平滑滚动，使页面在不同部分之间的过渡更加平滑。

添加以下简单的一行代码，亲自体验效果。

html{
  scroll-behavior:smooth;
}

accent-color

改变用户界面的颜色，例如表单控件和复选框。

看看复选框和单选按钮的颜色是蓝色的，而不是默认（乏味的）灰色。

input{
  accent-color: blue;
}

Aspect Ratio

在构建响应式组件时，经常检查高度和宽度可能会令人头疼，因为你必须保持纵横比。有时候视频和图片可能会显得拉伸。

这就是为什么我们可以使用纵横比属性。一旦设置了纵横比值，然后再设置宽度，高度就会自动设置。或者反之亦然。

/* class为example的元素 */
.example{
  /* 设置纵横比 */
  aspect-ratio: 1 / .25;
  /* 设置宽度后，高度会自动设置 */
  width: 200px;
  /* 边框不是必需的，但这里只是为了看效果而添加的 */
  border: solid black 1px;
}

Box Reflect

Box Reflect 能够在组件下方创建其反射效果。对于这个演示，我使用了一个SVG波浪图像，我是通过网站getwavesopen in new window获取的。

如何检查CSS中是否支持特定属性

要检查特定属性在CSS中是否受支持，可以使用 @supports 规则。以下是示例：

@supports (display: flex) {
  /* 如果支持 */
  /* 在这里放置针对支持该属性的样式规则 */
}

@supports not (display: flex) {
  /* 如果不支持 */
  /* 在这里放置针对不支持该属性的备用样式规则 */
}

Masks

可以在CSS中使用图像遮罩。

/* class为'example'的元素 */
.example{
  /* 从URL设置遮罩 */
  -webkit-mask: url(你的URL);
  mask: url(你的URL);
}

在遮罩图像中，白色代表遮罩区域，黑色是要裁剪的区域。

Filter

我们可以使用CSS为图像添加惊人的滤镜效果。滤镜效果是我们在每个照片分享应用程序中都会看到的功能，现在让我们看看它们有多容易实现。

img{ filter: /* 你的值 */; }

有许多可用的滤镜效果。可以使用模糊、增加亮度、饱和度等滤镜效果。可以使图像变为灰度、更改不透明度、反转颜色等等。

Backdrop effects

我们可以使用backdrop-filter为图像背后的区域添加漂亮的滤镜效果。

backdrop-filter提供了filter的所有属性。简而言之，它是一个应用于背景的滤镜效果。

请注意，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>
贡献者: mankueng