5个每个开发人员都应该知道的很棒的CSS 技巧

CSS 笔记 2021-08-09 oaklee 手机阅读

这一次我收集了5个非常棒的CSS技巧，只需几行代码就可以完成一些很棒的功能。

现在准备好了吗，让我们开始吧！

01、平滑滚动

当您有一个显示网页不同部分的按钮时，此技术非常重要。用一个简单的 href="#goToContact" 来完成这个功能。

html {  scroll-behavior: smooth;}

02、调整图像以合适大小位置

下面是一个例子：

img {    max-width:100%;    height:auto;}

03、将图像设置为光标

想让您的光标像您的网络应用程序或网站一样特别吗？这可以为您的网络访问者提供独特的纪念品，所以为什么不：

body {  cursor: url("images/cursor.png"), auto;}

04、3 行代码将任何东西居中

这里有 3 条神奇的 CSS 行来居中任何内容，代码如下：

.center {  width: 300px;  height: 300px;  display: flex;  justify-content: center;  align-items: center;}

05、在段落中设置有限的内容

您是否需要在段落中只显示几个短语？同样，CSS 可以在一行代码中做到这一点。-webkit-line-clamp CSS 属性允许将块容器的内容限制为指定的行数。

p {  -webkit-line-clamp: 5;}

总结

以上就是我分享的5个CSS技巧，希望对大家有所帮助。

感谢您的阅读。