1. Scroll behavior平滑滚动

html {
  scroll-behavior: smooth;
}

这行简单的代码可以避免编写复杂的js代码就可以实现滚动条的平滑滚动。但是兼容性的话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;
}

简单而强大的属性，可以轻松地更改标指针的外观。

常用鼠标外观

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;。

布局效果

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/29944.html