Learn web development

Styling boxes

你好,欢迎来到“样式化CSS盒子”部分 —— 在上一部分,我们了解了盒子内部的内容;这个部分,我们将学习对盒子自身进行样式化,包括操纵其背景颜色、图像、边框和其他部分等。我们还将讨论其他主题,包括美化HTML表格和应用高级效果,如滤镜、混合模式。

准备条件

 在开始此部分内容之前,你需要对HTML有基本的了解,具体参见introduction to HTML,且对CSS基础不会太陌生,具体参见Introduction_to_CSS

注意: 如果你正在一台不能创建你自己的文件的电脑/平板或者其它设备上工作, 你可以在诸如JSBin或者Thimble这样的在线平台上试运行我们(绝大部分)的示例代码。

概览

这些文章将会用一种有趣而简单的方式教会你所有有关样式化CSS盒子的方式。

盒子模型概要
我们已经在 Introduction to CSS 部分了解了CSS盒子模型基础。本文将会对该部分进行概要回顾,并将深入讨论更多相关细节。
背景
在CSS中,你可以有很多的方式来为你的内容设置背景。我们已经看过一些例子,比如说基本的图片背景和颜色背景。本文将会向你讲述关于这个话题的一切,并且会了解一些高级特性,比如说多图背景,渐变色。
边框
又一次,我们已经接触过边框了,简单的用法比如设置边框的颜色和样式。 在这里,我们将为您介绍可用的其他功能,例如圆角和边框图像。
样式化表格
对HTML表格进行样式化并不是世界上最富有魅力的工作,但有时我们必须这样做。 本文提供了使HTML表格看起来不错的指南,前面的文章中详细介绍了这些工具。
高级盒子效果
本文作为一个技巧,提供了一些可用于不适合上述其他类别的样式框的高级功能的介绍,如边框阴影,混合模式和过滤器。

评估

以下评估将测试您对上述指南中所述的盒子造型技术的理解。

创建酷炫的信头纸
如果你想做出正确的印象,在一张漂亮的信头纸上写信可能是一个很好的开始。 在这个评估中,我们给您一个挑战——创建一个在线模板,以实现这一目的。
一个漂亮的盒子模型
在这里,您将通过尝试创建一个eyecatching框来获得更多练习创建漂亮的框。

另请参加

创建酷炫的盒子模型
更多酷炫的盒子模型风格样例。

文档标签和贡献者