<div class="seal"> <div class="inner"> <div class="circle"></div> <div class="rectangle"></div> <div class="text">印章文字</div> </div> </div>
首先，大家需要一个基础的HTML结构来定义印章的形态。如上述代码所示，大家创建了一个名为“seal”的div容器，并在其内部创建了一个名为“inner”的div容器，作为印章内部的容器。在这个内部容器中，大家定义了一个名为“circle”的div和一个名为“rectangle”的div，分别代表印章的圆形和矩形部分。另外，大家还添加了一个名为“text”的div，作为印章上的文字元素。
.seal {
width: 6rem;
height: 6rem;
position: relative;
background-color: #f00;
overflow: hidden;
border-radius: 50%;
box-shadow: 2px 2px 10px 1px #555;
margin: 3rem auto;
}
.seal .inner {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 1px 1px #000;
}
.seal .circle {
width: 70%;
height: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f00;
border-radius: 50%;
z-index: 10;
}
.seal .rectangle {
width: 50%;
height: 15%;
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f00;
z-index: 10;
}
.seal .text {
width: 70%;
height: 30%;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2rem;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 1.6rem;
z-index: 20;
}接着，大家使用CSS来定义印章的样式。在上述代码中，大家设置了“seal”元素的宽高为6rem，圆角半径为50%，并添加了阴影效果。在“inner”元素中，大家设置了宽高为100%，并使用了绝对定位和transform属性来让其上下居中。圆形部分“circle”和矩形部分“rectangle”的位置同样使用了绝对定位和transform属性来居中，并且在“circle”元素上添加了一个大的z-index值，以使其覆盖在“rectangle”元素上面。最后，大家设置了文字元素“text”的样式，包括字体大小、加粗、对齐方式、行高等。
使用上述代码，大家可以制作出一个简单而优美的印章效果，功能强大又美观。CSS的样式控制能力使得大家可以自由地设计各种不同风格的印章，探索更多的可能性，带来更加出彩的网页设计。