10 个非常有用的 CSS 单行代码，你可能没有使用过它们

七夏发表于 2025-2-15 09:49:42

<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/eXCSRjyNYcZ5vKC0t5Q2ZCbZbnCrO6gZR5YArYEic0pS6L16ZvEmyBe0tLNuOU6pdw30oibtY3UJ1ib0zAdibGVLYg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
CSS 是设计网站的工具之一。许多开发人员只了解 CSS 的基础知识，他们花了数小时才弄好布局，或者设计出总觉得缺少点什么的设计。
但有一些特殊功能和隐藏的精华可以为您节省数小时的工作时间，并显著改善您的代码，使其更加完美。
以下可能是你没有使用过，但绝对有用的 10 个 CSS 功能！
1. 创建布局
您是否曾尝试过制作类似 Pinterest 的布局，而有的项目具有不同的高度？网格和弹性框经常会留下尴尬的间隙，看起来不太好看。
解决方法：使用 columns 属性。
<pre><code>columns: 300px auto;
</code></pre>
这会将您的内容拆分为响应式列。每列宽度至少为 300 像素，浏览器将根据屏幕尺寸决定适合多少列。没有间隙，没有压力！
2. 明暗模式之间切换
用户喜欢暗模式，但手动为每个元素编写样式可能会花很长时间。
解决方法：让明暗功能处理它。
<pre><code>color: light-dark(#000, #fff);
</code></pre>
这会根据用户的设备主题自动更改文本颜色。在暗模式下，文本变为白色，在亮模式下，文本变为黑色。很简单，对吧？
3. 悬停在多个项目上
您希望悬停效果不仅改变您悬停的元素，还改变其邻居。
解决方法：使用同级选择器。
<pre><code>.item:hover ~ .item { transform: scale(1.1); }
</code></pre>
当您将鼠标悬停在一个 .item 上时，这将增加其右侧所有项目的大小。如果您愿意，甚至可以调整左侧项目的大小！
4. 修复图层位置
调整屏幕大小时，具有多个重叠图层的设计可能会变得混乱。元素四处移动，一切看起来都不对劲。
解决方法：使用 position: fixed。
<pre><code>position: fixed;
</code></pre>
无论屏幕大小如何，这都能让您的元素保持固定位置。对于像 Parallax 或任何具有大量图层的设计来说，它非常方便。
5. 以 3D 形式旋转对象
制作 3D 效果（如旋转的汽水罐）通常需要 JavaScript 和大量工作。
解决方法：使用 CSS 旋转。
<pre><code>transform: rotateY(var(--angle));
</code></pre>
这会沿 Y 轴旋转对象，使其看起来是 3D 的。更改 --angle 值，它就会旋转！
6. 为 SVG 文本添加动画
您希望 SVG 文本看起来像是写出来的，但这似乎太复杂了。
解决方法：使用 stroke-dasharray。
<pre><code>stroke-dasharray: 100%; stroke-dashoffset: 0; animation: draw 2s linear;
</code></pre>
这会使 SVG 文本的轮廓动起来，看起来就像是实时绘制的。效果很棒，而且做起来非常简单！
7. 制作类似墨水的效果
您想创建一个看起来像泼洒的墨水或烟雾的酷炫效果，但仅使用 CSS 似乎无法实现。
解决方法：使用 mask-image 属性。
<pre><code>mask-image: url('ink-mask.svg'); mask-size: cover;
</code></pre>
这会将元素剪裁为蒙版图像的形状。要获得墨水效果，只需使用墨水形状的 SVG 或图像作为蒙版即可。
8. 创建 3D 旋转木马
构建 3D 图像滑块听起来很复杂，如果没有 JavaScript 很难做到。
解决方法：使用 transform 和 rotateY。
<pre><code>transform: rotateY(calc(var(--index) * 90deg)) translateZ(500px);
</code></pre>
这会将项目定位在 3D 空间中的圆圈内。更改 --index 值会使每个项目围绕圆圈旋转。
9. 删除图像背景
您需要删除图像的背景，但这听起来像是 Photoshop 的工作。
解决方法：使用 mix-blend-mode。
<pre><code>mix-blend-mode: darken;
</code></pre>
这会逐个像素地将图像与其背景进行比较，并移除较亮的区域，使较暗的部分可见。它并不适用于所有图像，但对许多图像来说效果很好。
10. 在 Sprite 中制作动画步骤
问题：您有一个 Sprite（具有多个帧的单个图像），并且想要轻松地为其制作动画。
解决方法：使用步骤计时功能。
<pre><code>animation-timing-function: steps(10);
</code></pre>
这会将动画分成相等的部分，使其看起来像精灵逐帧移动。非常适合创建跳跃或奔跑的动画！
好了，10 个 CSS 单行代码可以解决常见的设计问题！
这些代码片段可能很小，但功能却非常强大。试试看，看看你的设计变得有多简单！如果你有任何问题或想法，请在留言中告诉我，我们一起学习进步。
最后，感谢你阅读，祝编程愉快！

页: [1]

3BBS's Archiver

10 个非常有用的 CSS 单行代码，你可能没有使用过它们