css如何设置多个盒子 |css3水墨展开效果

前提：在 HTML 中，用<div>元素可以创建一个容器来包含其他 HTML 元素，此外，<div>元素也可用于为 CSS 样式设置一个容器。

首先在 HTML 中创建多个<div>元素来承载大家的内容：

<div class="box box1">
<h2>这是盒子一</h2>
<p>这是盒子一的内容</p>
</div>
<div class="box box2">
<h2>这是盒子二</h2>
<p>这是盒子二的内容</p>
</div>
<div class="box box3">
<h2>这是盒子三</h2>
<p>这是盒子三的内容</p>
</div>

然后大家可以创建一个 CSS 样式表来设置这些盒子的样式：

.box {
width: 300px;
height: 200px;
border: 1px solid #000;
padding: 20px;
margin: 20px 0;
}
.box h2 {
font-size: 24px;
margin-bottom: 10px;
}
.box p {
font-size: 16px;
line-height: 1.5;
}
.box1 {
background-color: #f2f2f2;
}
.box2 {
background-color: #e0e0e0;
}
.box3 {
background-color: #d0d0d0;
}

这段 CSS 代码的含义是，.box的样式设置了所有盒子的基本样式，包括宽度、高度、边框、内边距和外边距等。然后，大家具体针对每个盒子添加了不同的背景色，以实现多种样式的呈现。

最终效果如下：

通过这个例子，大家可以清楚地了解如何使用 CSS 设置多个盒子的样式。关键在于，要对每个盒子的类名进行具体的样式设置。