7个实用的CSS技巧

.element {
    float: left;
    shape-outside: ellipse(50% 50% at 50% 50%);
}

使用多边形:

.element {
    float: left;
    shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
}

使用图像:

.element {
    float: left;
    shape-outside: url('path-to-image.png');
}

实际应用

假设你有一个圆形图像，您希望文本围绕它排列，同时尊重圆的边界。没有 shape-outside，文本只会围绕图像的矩形边界盒子进行排列。但使用 shape-outside，可以使文本平滑地围绕圆形图像进行排列，从而得到更加视觉上吸引人的布局。

整合地址：codepen.io/OMGZui/pen/…

3. 使用 :where() 简化代码

当将同一样式应用于多个元素时，CSS可能会像这样：

.page div,
.paget .title,
.page #article {
   color: red;
}

这段代码看起来并不是很易读，而 :where() 伪类就派上了用场。 :where() 伪类函数接受一个选择器列表作为其参数，并将选择所有可以由选择器列表中的任何规则选择的元素。

.page :where(div, .title, #article) {
 color: red;
}

4. 透明图像的阴影

你是否曾尝试在透明图像上添加 box-shadow ，结果却看起来像是你添加了边框？我想我们都有过这样的经历。为透明图像添加阴影效果的解决方案是使用 drop-shadow 。

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

事例地址：codepen.io/OMGZui/pen/…

5. 文字的打字效果

网页设计正在以每分钟的速度变得更富创意。借助CSS动画功能，您可以让您的网页充满生机。在这个例子中，我们使用动画和@keyframes属性来实现打字机效果。

具体来说，对于这个演示，我们实现了 steps() 属性来分割我们的文本动画。首先，你需要指定 steps() 的数量，就我们的情况来说，这是我们希望进行动画处理的文本的字符长度。

其次，我们使用 @keyframes 来声明动画何时开始。例如，如果你在“文字打字效果”后面写了另一个词，除非你改变CSS片段中的 steps() 数量，否则动画将无法工作。

也就是说，这种效果并不是特别新颖。然而，尽管可以通过使用CSS达到同样的效果，但大多数开发者仍然会选择使用JavaScript库。

事例地址：codepen.io/OMGZui/pen/…

6. 设置自定义光标

你可能永远不需要强制让你的访客使用独特的光标。至少，对于一般的用户体验目的来说是这样。然而，关于 cursor 属性的一点值得注意的是，它允许你展示图片。这相当于以照片格式展示工具提示。

一些使用场景包括能够比较两张不同的照片，而无需在视口中渲染这些照片。例如，可以使用光标属性来节省设计中的空间。由于你可以将自定义光标锁定到特定的 div元素上，所以它不会干扰到元素之外的其他元素。

事例地址：codepen.io/OMGZui/pen/…

7. 纯CSS的清单

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

[外链图片转存中…(img-4KJU2JIO-1718164134888)]

[外链图片转存中…(img-SXtHIJ7S-1718164134889)]