快看！10个不错的CSS实用小技巧（分享）

本篇文章给大家分享10个不错的css实用小技巧，让前端开发更轻松，快来收藏吧，希望对大家有所帮助！

CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。【推荐学习：css视频教程】

1、 打字效果

立即学习“前端免费学习笔记（深入）”；

网页设计变得越来越有创意。在 CSS 动画的协调下，你的网页会像活的一样。在这个例子中，我们将使用 animation 和 @keyframes 属性去实现打字效果。

具体来说，在这个演示中，我们通过 steps() 属性来实现分割文本的效果。首先，你必须指定 step() 中传入的数量，在这个例子中就是文本的长度。

接着，第二步，我们使用 @keyframes 去声明什么时候开始执行动画。

这种效果并不是特别新鲜。然而，很多开发者却使用 JavaScript 库去实现，而不是使用 CSS。

代码片段

2、透明图片阴影效果

你是否使用过 box-shadow 为透明的图片添加阴影，却让其看起来像添加了一个边框一样？然而解决方案是使用 drop-shadow。

drop-shadow 的工作方式是，其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状，而不是显示在图片外面。

代码片段

3、自定义 Cursor

你不需要强迫你站点访问者使用独特的光标。至少，不是出于用户体验的目的。不过，关于 cursor 属性要说明的是，它可以让你展示图片，这相当于以照片的格式显示提示信息。

一些用户案例，包括比较两个不同的照片，你无需在视图窗口渲染这些照片。比如：cursor 属性可以用在你的设计中，节省空间。因为你可以在特定的 div 元素中锁定特定的光标，所以在此 div 这外可以无效。

目前尝试对图片的大小有限制，读者可以自行更改验证

代码片段

4、使用 attr() 展示 tooltip

attr() 属性是我最近发现的，且是最得意的发现。我本打算为我的站点添加 tooltip 的功能，但是发现需要引入一个插件，这就引入了不必要的东西，让我的站点看起来臃肿。感谢的是，可以使用 attr() 来避免这种情况。

attr() 属性工作的方式很简单，我逐步解析一下：

此外，你可以包含自定义的样式。这取决于你设定的 tooltp 的数据，你也许需要调整其宽度或者边距。一旦你设定了 tooptip-data arrt() 类，你可以在你设计的其他部分应用。

代码片段

5、纯 CSS 实现核算清单

正如我开头所说的，CSS 正逐步成熟。这个动态清单的演示就是一个很好的例子。

我们使用 checkbox 输入类型，加上一个 :checked 伪类。当 :checked 返回 true 的情况时，我们使用 transform 属性更改状态。

你可以使用这种方法实现各种目标。比如，当用户点点击指定的复选框时候，切花到隐藏其内容。在输入 input 类型的单选和复选框使用，当然，这也可以应用到 和 元素。

代码片段

6、使用 :is() 和 :where() 添加元素样式

现代 CSS 框架运行的一种方式是通过使用条件逻辑选择器。换言之，:is() 和 :where() 属性可以用于同时设置多种设计元素的样式。但是，更重要的是，你可以使用这些属性去查询你需单独处理的元素。

下面的 CSS 片段是一个小案例，你可以通过 MDN 学习