11个好用的CSS代码

投稿用户 • 2022年10月4日 am2:11 • 视频彩铃 • 阅读 488

本文分享一些非常好用的CSS代码片段，它们很短但功能强大。使用这些代码，我们可以立即提高网站的体验。下面是11个非常好用的CSS代码片段：

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

布局效果

生意营销3大宝：彩铃、定位、认证，一个也不能少，如有需要，添加微信：xnc528 备注：3

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 820277912@qq.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.clzz8.com/14789.html