使用 CSS 解决常见问题

¥Styling boxes

如何向元素添加阴影？

可以将阴影添加到具有 box-shadow 属性的框。本教程解释了它的工作原理并展示了一个示例。

如何在不扭曲图片的情况下用图片填充方框？

object-fit 属性提供了将图片放入具有不同纵横比的框中的不同方法，你可以在本教程中了解如何使用它们。

可以使用哪些方法来设置框样式？

使用 CSS 设置框样式时可能有用的不同属性的概述。

如何使元素半透明？

为此，可以使用 opacity 属性和带有 alpha 通道的颜色值；找出何时使用哪一个。

¥Box styling lessons and guides

• 盒子模型
• 设置背景和边框的样式

¥CSS and text

如何为文本添加阴影？

可以使用 text-shadow 属性将阴影添加到文本中。本教程解释了它的工作原理并展示了一个示例。

如何高亮段落的第一行？

了解如何使用 ::first-line 伪元素定位段落中的第一行文本。

如何高亮文章的第一段？

了解如何使用 :first-child 伪类定位第一段。

仅当段落紧接在标题之后时，如何高亮该段落？

组合器可以帮助你根据元素在文档中的位置精确定位元素；本教程介绍如何使用它们将 CSS 应用到紧跟在标题后面的段落。

¥Text styling lessons and guides

• 如何设置文本样式
• 如何自定义元素列表
• 如何设置链接样式
• CSS 选择器

¥CSS Layout

如何将项目居中？

将一个项目在另一个盒子内水平和垂直居中曾经很棘手，但 Flexbox 现在使这变得简单。

¥Layout guides

• 使用 CSS Flexbox
• 使用 CSS 多列布局
• 使用 CSS 网格布局
• 使用 CSS 生成内容

注意：我们有一本专门针对 CSS 布局解决方案 的秘诀，其中包含完整的工作示例和常见布局任务的解释。另请查看 实际定位示例，它展示了如何使用定位来创建选项卡式信息框和滑动隐藏面板。

¥Note: We have a cookbook dedicated to CSS Layout solutions, with fully working examples and explanations of common layout tasks. Also check out Practical Positioning Examples, which shows how you can use positioning to create a tabbed info box, and a sliding hidden panel.