11个好用的单行CSS代码

本文分享一些非常好用的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(130px 140px at 10% 20%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

clip path CSS属性可以使我们控制显示区域的哪一部分。区域内的内容显示，而外部隐藏。

3. Filter 属性

filter: drop-shadow(16px 16px 20px red);

通过这行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; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

想阻止你的用户复制文本吗？如果是，则 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: inset 0 0 6px rgba(0,0,0,0.9);}
 
body::-webkit-scrollbar-thumb {
  background-color: red;
  outline: 1px solid red;
}

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: center stretch;

在grid布局中，align-items属性控制垂直位置，justify-items属性控制水平位置。这两个属性的值一致时，就可以合并写成一个值。所以，place-items: center;等同于place-items: center center;。

结论

了解这些属性可以避免编写复杂的JavaScript代码。当然，在使用任何CSS属性之前，都应该检查浏览器的兼容性。