共计 3773 个字符，预计需要花费 10 分钟才能阅读完成。
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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;}Scroll behavior
滚动行为能够实现平滑滚动，使页面在不同局部之间的过渡更加平滑。
增加以下简略的一行代码，亲自体验成果。
html{scroll-behavior:smooth;}不再简略地霎时切换页面到下一个局部，而是平滑地滚动到相应的局部。在这里查看成果。
https://www.w3schools.com/cssref/tryit.php?filename=trycss_sc…
accent-color
扭转用户界面的色彩，例如表单控件和复选框。
看看复选框和单选按钮的色彩是蓝色的，而不是默认（乏味的）灰色。
input{accent-color: blue;}就是这样。你能够应用选择器来使一些输入框变蓝色，一些变红色，一些变绿色。
而且这不会扭转文本的色彩，所以你能够尝试各种色彩进行试验。用户界面的色彩由咱们管制。
Aspect Ratio
在构建响应式组件时，常常查看高度和宽度可能会令人头疼，因为你必须放弃纵横比。有时候视频和图片可能会显得拉伸。
这就是为什么咱们能够应用纵横比属性。一旦设置了纵横比值，而后再设置宽度，高度就会主动设置。或者反之亦然。
/* class 为 example 的元素 /
.example{
/ 设置纵横比 /
aspect-ratio: 1 / .25;
/ 设置宽度后，高度会主动设置 /
width: 200px;
/ 边框不是必须的，但这里只是为了看成果而增加的 */
border: solid black 1px;
}当初，咱们设置了宽度，高度将主动设置为 50 像素，以放弃纵横比。这对于响应式行为十分有用。
Box Reflect
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 中是否反对特定属性
要查看特定属性在 CSS 中是否受反对，能够应用 @supports 规定。以下是示例：
@supports (display: flex) {
/* 如果反对 */
/* 在这里搁置针对反对该属性的款式规定 */
}
@supports not (display: flex) {
/* 如果不反对 */
/* 在这里搁置针对不反对该属性的备用款式规定 */
}在上述代码中，通过 @supports 规定，咱们能够在括号内指定一个属性，而后依据该属性是否受反对来执行相应的款式规定。如果反对该属性，则执行第一个规定块中的款式规定，如果不反对该属性，则执行第二个规定块中的备用款式规定。
例如，上述示例中的 (display: flex) 示意查看浏览器是否反对 display: flex 属性。如果反对，将执行第一个规定块中的款式规定；如果不反对，则执行第二个规定块中的备用款式规定。
这种形式能够用来查看任何 CSS 属性的反对状况，以便依据反对状况利用不同的款式规定。
Masks
能够在 CSS 中应用图像遮罩。
/* class 为 'example' 的元素 /
.example{
/ 从 URL 设置遮罩 */
-webkit-mask: url(你的 URL);
mask: url(你的 URL);
}在遮罩图像中，红色代表遮罩区域，彩色是要裁剪的区域。
Filter
咱们能够应用 CSS 为图像增加惊人的滤镜成果。滤镜成果是咱们在每个照片分享应用程序中都会看到的性能，当初让咱们看看它们有多容易实现。
`img{
filter: / 你的值 /;
}`
有许多可用的滤镜成果。能够应用含糊、减少亮度、饱和度等滤镜成果。能够使图像变为灰度、更改不透明度、反转色彩等等。
地址：https://www.w3schools.com/cssref/css3_pr_filter.php
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>这就产生了这样的成果:
通过理解这 10 个新的 CSS 属性，能够使你的网站看起来十分业余。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
