翻译正在进行中。

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

准备条件

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

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

概览

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

盒子模型概要
我们已经在 Introduction to CSS 部分了解了CSS盒子模型基础。本文将会对该部分进行概要回顾,并将深入讨论更多相关细节。
背景
在CSS中,你可以有很多的方式来为你的内容设置背景。我们已经看过一些例子,比如说基本的图片背景和颜色背景。本文将会向你讲述关于这个话题的一切,并且会了解一些高级特性,比如说多图背景,渐变色。
边框
Again, we've already looked at borders a bit — simple uses like setting border colors and styles. Here we'll give you an idea of what else is available, such as rounded corners and border images.
样式化表格
Styling an HTML table isn't the most glamourous job in the world, but sometimes we have to do it. This article provides a guide to making HTML tables look good, with the tools detailed in the previous articles.
高级盒子效果
This article acts as a box of tricks, providing an introduction to some of the advanced features available for styling boxes that don't fit into the other categories above — like box shadows, blend modes and filters.

评估

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

Creating fancy letterheaded paper
If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment we'll challenge you to create an online template to achieve such a look.
A cool looking box
Here you'll get some more practice in creating cool-looking boxes, by trying to create an eyecatching box.

另请参加

Creating fancy boxes
Some more cool box styling ideas.

文档标签和贡献者

 最后编辑者: garyxt,