3 个炫酷的 CSS 技巧，让你在聚会上给朋友留下深刻印象

伪元素覆盖

响应式宽高比

快速，无需 JS，点击即可显示

最后的话

谢谢

等等，没有人会这么做……

但我发誓，这些技巧仍然很棒。那么，让我们先来介绍一下：

这些年来，我使用 CSS 的经验有时令人欣喜，有时却又令人沮丧。但有一件事帮助我实现了精致优雅的界面，那就是收集一些非常具体的技巧，并且最重要的是，记住要针对特定​​的解决方案使用它们。

我的意思是，我无法再强调理解 CSS 的工作原理以及掌握基础知识的重要性，但是当你用一句“哦，你为什么不试试这个技巧呢？”帮助一个正在努力学习 CSS 的人时，你会感到非常有成就感。

考虑到这一点，以下是我最喜欢的一些 CSS 技巧。希望它们能在你的前端之旅中助你一臂之力！

伪元素覆盖

叠加层是一个非常实用的解决方案，许多设计师用它来处理悬停状态，并提高文本在图片上的可读性。而实现灵活、可预测的叠加层的一个非常简单的方法是使用伪元素。

您可能知道，我们可以使用伪元素来扩展元素的行为，否则只有通过在其中添加另一个元素才有可能。

这真是太酷了。看看下面的例子，每个例子都代表了一个常见的 UI 问题，而一个良好的覆盖层设计可以帮你解决这些问题。

下一招！

响应式宽高比

您可能知道其中的痛苦，让 iframe、视频或嵌入响应并不像看起来那么容易。

响应式 CSS 的一个优点是使元素的宽度响应浏览器的宽度，一个简单的操作max-width: 100%;几乎就是您所需要的，以使元素水平挤压，从而防止其溢出屏幕。

但如果你还需要让该 div 的高度适应浏览器的宽度，答案就不那么明显了。这个问题在以下情况下尤其明显：

这个技巧之所以有效，是因为当你使用百分比时，padding它总是相对于父级宽度。所以 apadding-bottom: 75%;会给你一个 4:3 的宽高比，而 apadding-bottom: %56.25;会给你经典的 16:9 宽屏。

太棒了！请问下一个。

快速，无需 JS，点击即可显示

当你需要添加一些基本功能，但又无法或不想用 JavaScript 时，这是一个相当流行的技巧。它运用了 CSS 和 HTML 的诸多细节，使其成为一个真正优雅的 hack。

这里，看一下 CSS 和 HTML 标签：

它为什么有效？

1. :checked 伪类选择器在复选框被选中时将其作为目标，就像 :hover 在光标悬停在复选框上时所做的那样
2. + 组合器针对的是复选框后面的直接元素
3. label 元素通过使用属性for=''，可以作为勾选复选框的另一种方式。我们使用它来添加文本并设置“按钮”的样式。

最后的话

你知道，这可能有点取决于你参加什么类型的（书呆子）派对，但这些技巧实际上可能会给你的朋友留下深刻的印象！

但如果没有，我希望它们是有用的，可以让你的工作更轻松，这样你就可以将精力花在其他事情上。

非常欢迎评论和反馈！

谢谢

封面照片由Drew Farwell在 Unsplash 上拍摄

嘿，我们联系吧👋

在 Twitter 上关注我并告诉我您喜欢这篇文章！

如果你真的喜欢它，请务必与你的朋友分享，这会对我有很大帮助😄