关于前端:每个前端开发需要了解的10个强大的CSS属性

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

本文介绍了 CSS（层叠样式表）的基本概念和作用，而后深刻探讨了 10 个罕用的 CSS 属性。这些属性包含边框（border）、背景（background）、定位（positioning）、盒模型（box model）等。每个属性都有一个大节，解释了它的作用、语法和用法示例。

文章还蕴含了一些无关 CSS 开发的最佳实际倡议，例如应用内部样式表、防止滥用 !important 规定和选择器的性能思考等。作者还提供了一些有用的资源和链接，供读者进一步学习和摸索。

上面是注释~~

以下是 10 个你可能很少应用或从未据说过的属性，但一旦你理解它们，你会爱上它们的。

让咱们扭转滚动条的宽度和色彩，还让它略微变得圆润一些。

以下是滚动条的各个局部。

咱们应用 ::-webkit-scrollbar 来扭转属性。

/* 设置滚动条的宽度 /
::-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;}

留神：这是一个非标准属性，如果没有 -webkit- 前缀，它将无奈失效。

在鼠标悬停在元素上时，扭转鼠标指针的款式。

/* class 为 'first' 的元素 /
.first{cursor: not-allowed;}
/ class 为 'second' 的元素 /
.second{cursor: zoom-in;}
/ class 为 'third' 的元素 */
.third{cursor: crosshair;}

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

增加以下简略的一行代码，亲自体验成果。

html{scroll-behavior:smooth;}

不再简略地霎时切换页面到下一个局部，而是平滑地滚动到相应的局部。在这里查看成果。

https://www.w3schools.com/cssref/tryit.php?filename=trycss_sc…

扭转用户界面的色彩，例如表单控件和复选框。

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

input{accent-color: blue;}

就是这样。你能够应用选择器来使一些输入框变蓝色，一些变红色，一些变绿色。

而且这不会扭转文本的色彩，所以你能够尝试各种色彩进行试验。用户界面的色彩由咱们管制。

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

这就是为什么咱们能够应用纵横比属性。一旦设置了纵横比值，而后再设置宽度，高度就会主动设置。或者反之亦然。

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

当初，咱们设置了宽度，高度将主动设置为 50 像素，以放弃纵横比。这对于响应式行为十分有用。

Box Reflect 可能在组件下方创立其反射成果。对于这个演示，我应用了一个 SVG 波浪图像，我是通过这个网站获取的。

https://getwaves.io/

/* class 为 'example' 的元素 /
.example{
  / 反射将显示在下方。其余可能的值有 above（上方）| left（左侧）| right（右侧）*/
  -webkit-box-reflect: below;
}

这将在 SVG 下方创立一个反射成果。

咱们也能够将反射偏移一点:

/* An element with class name 'example */
.example{
    /* The reflection will appear below. Other possible values are above | left | right */
    -webkit-box-reflect: below 20px;
}

此外，我心愿它淡化一点。咱们能够用 gradient。

/* An element with class name 'example */
.example{
    /* The reflection will appear below. Other possible values are above | left | right */
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}

要查看特定属性在 CSS 中是否受反对，能够应用 @supports 规定。以下是示例：

@supports (display: flex) {
  /* 如果反对 */
  /* 在这里搁置针对反对该属性的款式规定 */
}

@supports not (display: flex) {
  /* 如果不反对 */
  /* 在这里搁置针对不反对该属性的备用款式规定 */
}

在上述代码中，通过 @supports 规定，咱们能够在括号内指定一个属性，而后依据该属性是否受反对来执行相应的款式规定。如果反对该属性，则执行第一个规定块中的款式规定，如果不反对该属性，则执行第二个规定块中的备用款式规定。

例如，上述示例中的 (display: flex) 示意查看浏览器是否反对 display: flex 属性。如果反对，将执行第一个规定块中的款式规定；如果不反对，则执行第二个规定块中的备用款式规定。

这种形式能够用来查看任何 CSS 属性的反对状况，以便依据反对状况利用不同的款式规定。

能够在 CSS 中应用图像遮罩。

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

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

咱们能够应用 CSS 为图像增加惊人的滤镜成果。滤镜成果是咱们在每个照片分享应用程序中都会看到的性能，当初让咱们看看它们有多容易实现。

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

有许多可用的滤镜成果。能够应用含糊、减少亮度、饱和度等滤镜成果。能够使图像变为灰度、更改不透明度、反转色彩等等。

地址：https://www.w3schools.com/cssref/css3_pr_filter.php

咱们能够应用 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>

这就产生了这样的成果:

通过理解这 10 个新的 CSS 属性，能够使你的网站看起来十分业余。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:每个前端开发需要了解的10个强大的CSS属性

自定义滚动条

鼠标指针款式

Scroll behavior

accent-color

Aspect Ratio

Box Reflect

如何查看 CSS 中是否反对特定属性

Masks

Filter

Backdrop effects

交换