UI树欲静本文分享一些非常好用的CSS代码片段，它们很短但功能强大。使用这些代码，我们可以立即提高网站的体验。下面是11个非常好用的CSS代码片段：
1. Scroll behavior
html{
scroll-behavior:smooth;
}这行简单的代码可以避免编写复杂的JavaScript。
此属性使我们能够定义当用户,单击滚动框中链接时，浏览器的滚动是跳跃还是平稳过渡。Chrome版本61+、Firefox 36+和Edge版本79+支持此属性。
2. Clip path
clip-path:circle(40%);
clip-path:ellipse(130px140pxat10%20%);
clip-path:polygon(50%0,100%50%,50%100%,050%);
clip-path:path('M0200L0,75A5,50,0,1150,75L200200z');
clip path CSS属性可以使我们控制显示区域的哪一部分。区域内的内容显示，而外部隐藏。
3. Filter 属性
filter:drop-shadow(16px16px20pxred);
通过这行css代码，我们可以给图片添加滤镜效果。此属性的视觉效果包括，如阴影、模糊、颜色偏移、反转颜色等。下面给出了其中一些属性。
filter:blur(5px);
filter:contrast(200%);
filter:grayscale(80%);4. Pseudo-classes
:is(header,main,footer)p:hover{
color:red;
cursor:pointer;
}:is()函数帮助我们通过选择器列表将相同的样式应用于一组不同的元素。选择器列表作为参数传递给:is()函数，选择器列表中的任何元素都会受到影响。它可以在实现DRY（不要重复你自己的代码）原则时发挥作用。
5. User select
div{
-webkit-user-select:none;/*Safari*/
-ms-user-select:none;/*IE10andIE11*/
user-select:none;/*Standardsyntax*/
}想阻止你的用户复制文本吗？如果是，则 user-select属性可以帮助我们实现这个功能。user-select 属性指定用户是否可以选择文本。
6. Change cursor
div{
cursor:alias;
}简单而强大的属性，可以轻松地更改标指针的外观。
不同的光标传达不同的含义。例如，可以用cursor:grab属性来表示可移动对象是可拖动的元素。
7. Caret color
input{
caret-color:red;
}改变输入框光标颜色，同时又不改变输入框里面的内容的颜色。
8. Custom Scrollbars
::-webkit-scrollbar{
width:20px;
}我们可以轻松地自定义滚动条，使用此属性可以给网站提供独特的触感。此外，还可以轻松更改滚动条轨迹和滑块。
body::-webkit-scrollbar-track{
-webkit-box-shadow:inset006pxrgba(0,0,0,0.9);}
body::-webkit-scrollbar-thumb{
background-color:red;
outline:1pxsolidred;
}9. Writing mode
writing-mode:vertical-lr;正确使用Writing mode可以帮助你为网站增添有趣的变化。书写模式设置文本是水平排列还是垂直排列。我们还可以通过将其应用于HTML文件的根元素来设置整个项目。
10. Border box
box-sizing:border-box;
width:100%;将box-sizing 设置为border-box是一个巧妙的技巧，可以避免任何意外的padding问题。它告诉浏览器在该元素的宽度和高度本身中指定的值中包含border 和 padding。例如，如果元素宽度为125px，则添加的任何padding都将包含在该宽度（125px）中。
11. Place items
place-items:centerstretch;在grid布局中，align-items属性控制垂直位置，justify-items属性控制水平位置。这两个属性的值一致时，就可以合并写成一个值。所以，place-items: center;等同于place-items: center center;。
结论
了解这些属性可以避免编写复杂的JavaScript代码。当然，在使用任何CSS属性之前，都应该检查浏览器的兼容性。
