css3做信封 |css中元素的分类

首先，大家需要设置一个 div 元素作为信封容器，并设置元素的大小和背景颜色，如下所示：

.envelope {
width: 300px;
height: 200px;
background-color: #eee;
}

接下来，大家需要制作信封的角标和信封口。使用 CSS3 的 transform 属性可以帮助大家实现这一效果，如下代码所示：

.envelope::before {
content: "";
position: absolute;
top: -20px;
right: 0;
border-top: 20px solid transparent;
border-left: 20px solid #eee;
border-right: 20px solid #eee;
border-bottom: 20px solid #eee;
transform: rotate(45deg);
}
.envelope::after {
content: "";
position: absolute;
bottom: -20px;
right: 20px;
left: 20px;
height: 20px;
background-color: #eee;
}

代码的解释：

::before 和 ::after 是 CSS3 伪元素，可以在一个元素之前或之后插入内容。

其中 ::before 用于模拟信封的右下角，使用绝对定位将其定位到容器的左上角，并使用 transform 属性将其旋转 45 度。

::after 则用于制作信封的口，使用绝对定位将其定位到容器的底部，并设置其高度为 20px，与容器的宽度相同，使其看起来像是一个封口。

最后大家可以将信封容器的边框设置为 1px 的实线，增加一些细节效果：

.envelope {
width: 300px;
height: 200px;
background-color: #eee;
border: 1px solid #ccc;
}

通过这些简单的代码，大家就能轻松制作出漂亮的信封效果。