创建精美的框
CSS 盒子是任何使用 CSS 样式化的网页的基本构建块。让它们看起来很漂亮既有趣又具有挑战性。有趣是因为它涉及到将设计理念转化为可工作的代码；具有挑战性则是因为 CSS 的限制。让我们来创建一些炫酷的盒子。
在开始实际操作之前，请确保你熟悉 CSS 盒子模型。熟悉一些 CSS 布局基础 也是有益的，但并非强制要求。
从技术层面来说，创建炫酷的盒子主要在于掌握 CSS 的 `border`（边框）和 `background`（背景）属性，以及如何将它们应用于特定的盒子。但除了技术本身，更在于释放你的创造力。这不会一天就能完成，有些 Web 开发者会用一生去享受其中乐趣。
我们将看到许多示例，但我们始终将在尽可能简单的 HTML 片段上进行操作，即一个简单的元素
<div class="fancy">Hi! I want to be fancy.</div>
好的，这只是一个很小的 HTML 片段，我们可以对这个元素做些什么修改呢？所有以下这些
- 它的盒子模型属性：
width、height、padding、border等。 - 它的背景属性：
background、background-color、background-image、background-position、background-size等。 - 它的伪元素：
::before和::after - 以及一些辅助属性，如：
box-shadow、rotate、outline等。
所以我们拥有一个非常广阔的游乐场。开始享受乐趣吧。
盒子模型调整
仅靠盒子模型，我们就可以做一些基本的事情，比如添加简单的边框，制作正方形等。当您将属性推向极限时，例如设置负数的 `padding` 和/或 `margin`，或者设置比盒子实际尺寸更大的 `border-radius` 时，事情才变得有趣起来。
制作圆形
这是既简单又非常有趣的事情。`border-radius` 属性用于创建应用于盒子的圆角，但如果半径大小等于或大于盒子的实际宽度，会发生什么？
.fancy {
/* Within a circle, centered text looks prettier. */
text-align: center;
/* Let's avoid our text touching the border. As
our text will still flow in a square, it looks
nicer that way, giving the feeling that it's a "real"
circle. */
padding: 1em;
/* The border will make the circle visible.
You could also use a background, as
backgrounds are clipped by border radius */
border: 0.5em solid black;
/* Let's make sure we have a square.
If it's not a square, we'll get an
ellipsis rather than a circle */
width: 4em;
height: 4em;
/* and let's turn the square into a circle */
border-radius: 100%;
}
是的，我们会得到一个圆
背景
当我们谈论炫酷的盒子时，处理它的核心属性是 `background-*` 属性。当你开始摆弄背景时，就像你的 CSS 盒子变成了一个你可以填充的空白画布。
在我们开始实际示例之前，让我们稍微回顾一下，因为有两个关于背景你应该知道的事情。
- 可以在一个盒子上设置 多个背景。它们像图层一样堆叠在一起。
- 背景可以是纯色或图像：纯色总是填充整个表面，但图像可以被缩放和定位。
好的，让我们来玩转背景
.fancy {
padding: 1em;
width: 100%;
height: 200px;
box-sizing: border-box;
/* At the bottom of our background stack,
let's have a misty grey solid color */
background-color: #e4e4d9;
/* We stack linear gradients on top of each
other to create our color strip effect.
As you will notice, color gradients are
considered to be images and can be
manipulated as such */
background-image:
linear-gradient(175deg, transparent 95%, #8da389 95%),
linear-gradient(85deg, transparent 95%, #8da389 95%),
linear-gradient(175deg, transparent 90%, #b4b07f 90%),
linear-gradient(85deg, transparent 92%, #b4b07f 92%),
linear-gradient(175deg, transparent 85%, #c5a68e 85%),
linear-gradient(85deg, transparent 89%, #c5a68e 89%),
linear-gradient(175deg, transparent 80%, #ba9499 80%),
linear-gradient(85deg, transparent 86%, #ba9499 86%),
linear-gradient(175deg, transparent 75%, #9f8fa4 75%),
linear-gradient(85deg, transparent 83%, #9f8fa4 83%),
linear-gradient(175deg, transparent 70%, #74a6ae 70%),
linear-gradient(85deg, transparent 80%, #74a6ae 80%);
}
注意：渐变可以以非常创造性的方式使用。如果您想看一些创意示例，请查看 Lea Verou 的 CSS 模式。如果您想了解更多关于渐变的信息，请随时阅读 我们的专门文章。
伪元素
在样式化单个盒子时，您可能会发现自己受到限制，并希望拥有更多盒子来创建更令人惊叹的样式。大多数时候，这会导致通过添加用于样式化的额外 HTML 元素来污染 DOM。即使有必要，这也有些被认为是糟糕的做法。避免此类陷阱的一种方法是使用 CSS 伪元素。
一片云
让我们通过将我们的盒子变成云来举个例子
.fancy {
text-align: center;
/* Same trick as previously used to make circles */
box-sizing: border-box;
width: 150px;
height: 150px;
padding: 80px 1em 0 1em;
/* We make room for the "ears" of our cloud */
margin: 0 100px;
position: relative;
background-color: #a4c9cf;
/* Well, actually we are not making a full circle
as we want the bottom of our cloud to be flat.
Feel free to tweak this example to make a cloud
that isn't flat at the bottom ;) */
border-radius: 100% 100% 0 0;
}
/* Those are common style that apply to both our ::before
and ::after pseudo elements. */
.fancy::before,
.fancy::after {
/* This is required to be allowed to display the
pseudo-elements, event if the value is an empty
string */
content: "";
/* We position our pseudo-elements on the left and
right sides of the box, but always at the bottom */
position: absolute;
bottom: 0;
/* This makes sure our pseudo-elements will be below
the box content whatever happens. */
z-index: -1;
background-color: #a4c9cf;
border-radius: 100%;
}
.fancy::before {
/* This is the size of the clouds left ear */
width: 125px;
height: 125px;
/* We slightly move it to the left */
left: -80px;
/* To make sure that the bottom of the cloud
remains flat, we must make the bottom right
corner of the left ear square. */
border-bottom-right-radius: 0;
}
.fancy::after {
/* This is the size of the clouds left ear */
width: 100px;
height: 100px;
/* We slightly move it to the right */
right: -60px;
/* To make sure that the bottom of the cloud
remains flat, we must make the bottom left
corner of the right ear square. */
border-bottom-left-radius: 0;
}
引用块
使用伪元素的一个更实际的例子是为 HTML <blockquote> 元素构建漂亮的格式。所以让我们看一个稍微不同的 HTML 片段的示例（这为我们提供了机会，也可以了解如何处理设计本地化）。
<blockquote>
People who think they know everything are a great annoyance to those of us who
do. <i>Isaac Asimov</i>
</blockquote>
<blockquote lang="fr">
L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase.
<i>Pierre Desproges</i>
</blockquote>
那么，这是我们的样式
blockquote {
min-height: 5em;
padding: 1em 4em;
font: 1em/150% sans-serif;
position: relative;
background-color: lightgoldenrodyellow;
}
blockquote::before,
blockquote::after {
position: absolute;
height: 3rem;
font:
6rem/100% "Georgia",
serif;
}
blockquote::before {
content: "“";
top: 0.3rem;
left: 0.9rem;
}
blockquote::after {
content: "”";
bottom: 0.3rem;
right: 0.8rem;
}
blockquote:lang(fr)::before {
content: "«";
top: -1.5rem;
left: 0.5rem;
}
blockquote:lang(fr)::after {
content: "»";
bottom: 2.6rem;
right: 0.5rem;
}
blockquote i {
display: block;
font-size: 0.8em;
margin-top: 1rem;
text-align: right;
}
全部结合以及更多
因此，将所有这些混合在一起可以创造出绝妙的效果。在某个时候，要完成这种盒子的美化，就是发挥创造力，既要考虑设计，也要考虑 CSS 属性的技术运用。通过这样做，可以创造出视觉错觉，让您的盒子栩栩如生，就像在这个例子中一样。
让我们创建一些部分阴影效果。`box-shadow` 属性允许我们创建内部光和平面阴影效果，但通过一些额外的工作，可以使用伪元素和 `rotate` 属性（三个独立的 `transform` 属性之一）来创建更自然的几何形状。
.fancy {
position: relative;
background-color: #ffffcc;
padding: 2rem;
text-align: center;
max-width: 200px;
}
.fancy::before {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 5px;
width: 50%;
top: 80%;
max-width: 200px;
box-shadow: 0px 13px 10px black;
rotate: 4deg;
}