css3 印章效果

CSS3 印章效果是一种用于美化网页元素的应用效果，具有突出和特殊效果的特点，常用于个性化网页设计中，下面我们学习一下如何实现这种效果。

.emboss{
        background-color:#fff;
        border:1px solid #999;
        box-shadow:1px 1px 2px #555;
        padding:10px;
        position:relative;
        width:150px;
}
.emboss:before{
        background-color:#ffdd99;
        border-radius:0 0 6px 6px;
        content:"";
        height:10px;
        left:-1px;
        position:absolute;
        top:-5px;
        width:146px;
        z-index:-1;
        transform: rotate(15deg);
}
.emboss:after{
        background-color:#ffdd99;
        border-radius:6px 6px 0 0;
        content:"";
        height:10px;
        left:-1px;
        position:absolute;
        bottom:-5px;
        width:146px;
        z-index:-1;
        transform: rotate(-15deg);
}
    

首先，我们定义一个类名为.emboss的容器来装载印章效果，设置容器的基本样式，包括背景色、边框、阴影和内边距等属性，使容器看起来像是一个矩形盒子。

然后，我们使用伪元素:before和:after来实现印章的上下两个底角，这两个伪元素分别为上底角和下底角，并且为了使印章效果更加真实，我们给它加上45度角的旋转效果，这里使用了CSS3中的Transform属性。

最终呈现出来的印章效果就是一个“立体感十足”的矩形盒子，既有结构美感又有视觉效果，给网页设计增添了不少个性化元素。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！