CSS

1、First letter drop 首字母下沉

7个实用的CSS技巧 - 图1
可以使用 :first-letter 来删除文本的第一个字母：

  1. p:first-letter {
  2.   font-size: 200%;
  3.   color: #8A2BE2;
  4. }

:first-letter 选择器用于指定元素的首字母样式，它仅适用于块级元素。效果如下：
https://codepen.io/Fcant/pen/VwqYEML
点击查看【codepen】

2、图像文本环绕

7个实用的CSS技巧 - 图2
CSS 中的 shape-outside 属性是一个非常有用且强大的工具，它允许设计师和开发者控制内容如何围绕一个浮动元素（通常是图像或图形）进行排列。通过定义这个属性中的形状，可以创建更复杂和吸引人的布局，使文本环绕复杂的形状，而不仅仅是通常的矩形。
shape-outside 属性定义了内容将围绕其排列的形状。它通常与 float 属性一起使用，因为只有浮动的元素才会有内容围绕它。
可用的值：

  1. none：默认值。不创建任何形状；内容围绕元素的盒子进行排列。
  2. <shape-box>：使用元素的边距盒、边框盒、填充盒或内容盒作为参考盒。
  • margin-box
  • border-box
  • padding-box
  • content-box
  1. <basic-shape>：可以定义一个基本的形状，例如：
  • circle()
  • ellipse()
  • inset()
  • polygon()
  1. <image>：一个图像可以用作形状的参考。图像的 alpha 通道决定了形状的尺寸。

    举例

    使用椭圆：
    1. .element {
    2. float: left;
    3. shape-outside: ellipse(50% 50% at 50% 50%);
    4. }
    使用多边形：
    1. .element {
    2. float: left;
    3. shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
    4. }
    使用图像：
    1. .element {
    2. float: left;
    3. shape-outside: url('path-to-image.png');
    4. }

    实际应用

    假设有一个圆形图像，希望文本围绕它排列，同时尊重圆的边界。没有 shape-outside，文本只会围绕图像的矩形边界盒子进行排列。但使用 shape-outside，可以使文本平滑地围绕圆形图像进行排列，从而得到更加视觉上吸引人的布局。
    整合地址：https://codepen.io/Fcant/pen/KKbwGXo
    点击查看【codepen】

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

    当将同一样式应用于多个元素时，CSS可能会像这样：
    1. .page div,
    2. .paget .title,
    3. .page #article {
    4. color: red;
    5. }
    这段代码看起来并不是很易读，而 :where() 伪类就派上了用场。 :where() 伪类函数接受一个选择器列表作为其参数，并将选择所有可以由选择器列表中的任何规则选择的元素。
    1. .page :where(div, .title, #article) {
    2. color: red;
    3. }

    4、透明图像的阴影

    7个实用的CSS技巧 - 图3
    是否曾尝试在透明图像上添加 box-shadow ，结果却看起来像是添加了边框？都有过这样的经历。为透明图像添加阴影效果的解决方案是使用 drop-shadow 。
    它的工作方式是， drop-shadow 属性遵循给定图像的alpha通道。因此，阴影是基于图像内部的形状，而不是显示在其外部。
    事例地址：https://codepen.io/Fcant/pen/MWZYPEB
    点击查看【codepen】

    5、文字的打字效果

    7个实用的CSS技巧 - 图4
    网页设计正在以每分钟的速度变得更富创意。借助CSS动画功能，可以让网页充满生机。在这个例子中，使用动画和@keyframes属性来实现打字机效果。
    具体来说，对于这个演示，实现了 steps() 属性来分割文本动画。首先，需要指定 steps() 的数量，就我们的情况来说，这是希望进行动画处理的文本的字符长度。
    其次，使用 @keyframes 来声明动画何时开始。例如，如果在“文字打字效果”后面写了另一个词，除非改变CSS片段中的 steps() 数量，否则动画将无法工作。
    也就是说，这种效果并不是特别新颖。然而，尽管可以通过使用CSS达到同样的效果，但大多数开发者仍然会选择使用JavaScript库。
    事例地址：https://codepen.io/Fcant/pen/ExGadwM
    点击查看【codepen】

    6、设置自定义光标

    7个实用的CSS技巧 - 图5
    可能永远不需要强制让访客使用独特的光标。至少，对于一般的用户体验目的来说是这样。然而，关于 cursor 属性的一点值得注意的是，它允许展示图片。这相当于以照片格式展示工具提示。
    一些使用场景包括能够比较两张不同的照片，而无需在视口中渲染这些照片。例如，可以使用光标属性来节省设计中的空间。由于可以将自定义光标锁定到特定的 div元素上，所以它不会干扰到元素之外的其他元素。
    事例地址：https://codepen.io/Fcant/pen/qBLEJPe
    点击查看【codepen】

    7、纯CSS的清单

    7个实用的CSS技巧 - 图6
    正如开头提到的，CSS正在稳步发展。而这个动态清单的演示就是一个很好的例证。
    它的工作方式是将复选框输入类型与 :checked 伪类一起使用。并使用 transform 属性在 :checked 规范返回真值时更改状态。
    使用这种方法可以实现各种各样的目标。例如，当用户点击特定的复选框时，切换隐藏的内容。它适用于单选和复选框等输入类型，但也可以应用于<option>和<select>元素。
    事例地址：https://codepen.io/Fcant/pen/mdayzqE
    点击查看【codepen】