14个实用的 CSS 技巧-编程学习网

现在，我们就开始今天的内容吧。

我们可以使用 :first-letter 来删除文本的第一个字母。

p:first-letter {
 font-size: 200%;
 color: #8A2BE2;
}

:first-letter 选择器用于指定元素首字母的样式，它只适用于块级元素。

在线演示地址：https://codepen.io/OMGZui/pen/oNEMVvN

Shape-outside 是一个允许设置形状的 CSS 属性，它还有助于定义文本流动的区域.

在线演示地址：https://codepen.io/OMGZui/pen/JjpBzGP

将相同的样式应用于多个元素时，CSS 可能如下所示：

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

这段代码看起来可读性不太友好，这时，:where() 伪类就派上用场了。

:where() 伪类函数接受一个选择器列表作为其参数，并将选择所有可以通过选择器列表中的任何规则选择的元素。

上面的代码可以使用 :where() 写成这样：

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

这样，这段代码是不是看起来干净多了？

您是否曾经尝试过向透明图像添加框阴影，只是为了让它看起来像您添加了边框？

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

在线演示地址：https://codepen.io/OMGZui/pen/bGLjJNO

借助 CSS 动画功能，我们可以使网页设计变得越来越有创意，还可以让网页栩栩如生。在此示例中，我们使用动画和“@keyframes”属性来实现打字机效果。

具体来说，对于这个演示，我们实现了 steps() 属性来分割我们的文本动画。

首先，我们必须指定 steps()，在这个例子中，我们希望设置动画的文本的字符长度。

其次，我们使用“@keyframes”来声明动画何时开始。例如，如果您在“Typing effect for text”之后写了另一个词，除非您更改 CSS 代码段中的 steps() 数量，否则动画将不会运行。

也就是说，这种效果并不是特别新鲜。然而，大多数开发人员涌向 JavaScript 库，尽管使用 CSS 可以实现相同的结果。

在线演示地址：https://codepen.io/OMGZui/pen/MWQBxqd

您不太可能需要强迫访问者进入一个独特的光标。至少，不是为了一般的用户体验目的。不过，关于 cursor 属性需要注意的一件事是它允许您显示图像。这相当于以照片格式显示工具提示。

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

在线演示地址：https://codepen.io/OMGZui/pen/abqjMXd

这是动态列表清单的演示效果例子。

它的工作方式是我们将复选框输入类型与 :checked 伪类一起使用。并在 :checked 规范返回 true 时使用 transform 属性更改状态。

您可以使用这种方法实现各种目标。例如，当用户单击特定复选框时切换隐藏内容。它适用于单选框和复选框等输入类型，但也可以应用于

文章详情