共计 2790 个字符，预计需要花费 7 分钟才能阅读完成。
前言
在网页设计和前端开发中，CSS 属性是十分重要的一部分。把握罕用的 CSS 属性不仅能够使你的网页看起来更好看，还能晋升用户体验，明天小编为大家介绍 8 个常见的 CSS 小技巧：
1. 批改滚动条款式
下图是咱们常见的滚动条，当初须要扭转滚动条的宽度和色彩了，并把它画的圆一点。
（常见的滚动条）
能够用::-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;}（扭转之后的滚动条）
2. 批改光标停留在页面上的款式
个别状况下鼠标的款式是一个箭头，扭转鼠标光标的款式为其余类型：
/* 类为 first 的元素，设置鼠标为不可用状态。*/
.first{cursor: not-allowed;}
/* 类为 second 的元素，将鼠标指针设置为放大镜成果 */
.second{cursor: zoom-in;}
/* 类为 third 的元素，将鼠标指针设置为十字准星形态 */
.third{cursor: crosshair;}（扭转之后的光标）
3. 放弃组件的纵横比大小
在构建响应式组件的时候，组件的高度与宽度的不协调常常会导致视频和图像会呈现拉伸的状况，影响读者的观感，因而咱们须要设置组件的纵横比属性：
.example{
/* 设置纵横比 */
aspect-ratio: 1 / .25;
/* 设置宽度后，高度主动设置 */
width: 200px;
/* 设置边框.*/
border: solid black 1px;
}设置了宽度之后，咱们将主动失去等于 125 像素的高度，以放弃长宽比。
（显示成果）
4. 页面平滑的滚动
通过代码实现平滑地从一个页面跳转到另一个页面：
<!DOCTYPE html\>
<html\>
<head\>
<style\>
/* 设置页面平滑地滚动 */
html {scroll-behavior: smooth;}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
}
<style\>
<head\>
<body>
<h1\>Smooth Scroll</h1\>
<div class="main" id="section1"\>
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="\#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
<p><strong>Note:</strong> The scroll-behavior property is not supported in Internet Explorer.</p>
</body>
</html>点击这里查看成果：
5. 筛选
应用 CSS 向图像增加滤镜：
img{filter: /*YOUR VALUE */;}有许多可用的过滤器。您能够含糊、增亮和饱和滤镜。您能够将图像设为灰度、更改其不透明度、反转色彩等等。
失常图像（左）、含糊图像（中）和高对比度图像（右）
增亮图像（左）、灰度图像（中）和色调旋转图像（右）
点击此页面理解更多对于筛选的详细信息。
6. 背景成果
应用 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>（实现的成果）
7. 组件反射
在 SVG 下方创立反射：
.example{
/* 反射将呈现在上面。其余可能的值如下:| left | right */
-webkit-box-reflect: below;
}（方框反射）
对消反射：
.example{
/* 反射将呈现在上面。其余可能的值如下:| left | right */
-webkit-box-reflect: below 20px;
}（带有偏移的反射）
突变反射：
.example{
/* 反射将呈现在上面。其余可能的值如下:| left | right */
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}（突变反射）
8. 查看浏览器是否反对某个属性
应用 @Supports 查看 CSS 是否反对特定属性。
/* 查看浏览器是否反对显示 */
@supports (display: flex){
/* 如果反对，则显示为 flex。*/
div{display: flex}
}以上就是对于 CSS 的 8 个小技巧，心愿能够帮忙到大家。
本文为翻译，原文地址：
https://medium.com/@anirudh.munipalli/10-powerful-css-propert…
扩大链接：
高级 SQL 剖析函数 - 如何用窗口函数进行排名计算
3D 模型 +BI 剖析，打造全新的交互式 3D 可视化大屏开发计划
React + Springboot + Quartz，从 0 实现 Excel 报表自动化
