​

CSS 是设计网站的工具之一。许多开发人员只了解 CSS 的基础知识，他们花了数小时才弄好布局，或者设计出总觉得缺少点什么的设计。

但有一些特殊功能和隐藏的精华可以为您节省数小时的工作时间，并显著改善您的代码，使其更加完美。

以下可能是你没有使用过，但绝对有用的 10 个 CSS 功能！

1. 创建布局

您是否曾尝试过制作类似 Pinterest 的布局，而有的项目具有不同的高度？网格和弹性框经常会留下尴尬的间隙，看起来不太好看。

解决方法：使用 columns 属性。

columns: 300px auto;

这会将您的内容拆分为响应式列。每列宽度至少为 300 像素，浏览器将根据屏幕尺寸决定适合多少列。没有间隙，没有压力！

2. 明暗模式之间切换

用户喜欢暗模式，但手动为每个元素编写样式可能会花很长时间。

解决方法：让明暗功能处理它。

color: light-dark(#000, #fff);

这会根据用户的设备主题自动更改文本颜色。在暗模式下，文本变为白色，在亮模式下，文本变为黑色。很简单，对吧？

3. 悬停在多个项目上

您希望悬停效果不仅改变您悬停的元素，还改变其邻居。

解决方法：使用同级选择器。

.item:hover ~ .item { transform: scale(1.1); }

当您将鼠标悬停在一个 .item 上时，这将增加其右侧所有项目的大小。如果您愿意，甚至可以调整左侧项目的大小！

4. 修复图层位置

调整屏幕大小时，具有多个重叠图层的设计可能会变得混乱。元素四处移动，一切看起来都不对劲。

解决方法：使用 position: fixed。

position: fixed;

无论屏幕大小如何，这都能让您的元素保持固定位置。对于像 Parallax 或任何具有大量图层的设计来说，它非常方便。

5. 以 3D 形式旋转对象

制作 3D 效果（如旋转的汽水罐）通常需要 JavaScript 和大量工作。

解决方法：使用 CSS 旋转。

transform: rotateY(var(--angle));

这会沿 Y 轴旋转对象，使其看起来是 3D 的。更改 --angle 值，它就会旋转！

6. 为 SVG 文本添加动画

您希望 SVG 文本看起来像是写出来的，但这似乎太复杂了。

解决方法：使用 stroke-dasharray。

stroke-dasharray: 100%; stroke-dashoffset: 0; animation: draw 2s linear;

这会使 SVG 文本的轮廓动起来，看起来就像是实时绘制的。效果很棒，而且做起来非常简单！

7. 制作类似墨水的效果

您想创建一个看起来像泼洒的墨水或烟雾的酷炫效果，但仅使用 CSS 似乎无法实现。

解决方法：使用 mask-image 属性。

mask-image: url('ink-mask.svg'); mask-size: cover;

这会将元素剪裁为蒙版图像的形状。要获得墨水效果，只需使用墨水形状的 SVG 或图像作为蒙版即可。

8. 创建 3D 旋转木马

构建 3D 图像滑块听起来很复杂，如果没有 JavaScript 很难做到。

解决方法：使用 transform 和 rotateY。

transform: rotateY(calc(var(--index) * 90deg)) translateZ(500px);

这会将项目定位在 3D 空间中的圆圈内。更改 --index 值会使每个项目围绕圆圈旋转。

9. 删除图像背景

您需要删除图像的背景，但这听起来像是 Photoshop 的工作。

解决方法：使用 mix-blend-mode。

mix-blend-mode: darken;

这会逐个像素地将图像与其背景进行比较，并移除较亮的区域，使较暗的部分可见。它并不适用于所有图像，但对许多图像来说效果很好。

10. 在 Sprite 中制作动画步骤

问题：您有一个 Sprite（具有多个帧的单个图像），并且想要轻松地为其制作动画。

解决方法：使用步骤计时功能。

animation-timing-function: steps(10);

这会将动画分成相等的部分，使其看起来像精灵逐帧移动。非常适合创建跳跃或奔跑的动画！

好了，10 个 CSS 单行代码可以解决常见的设计问题！

这些代码片段可能很小，但功能却非常强大。试试看，看看你的设计变得有多简单！