html锯齿边框,css3制作邮票（锯齿边框）-css3制作邮票（锯齿边框）-HTML5+CSS3-编玩编学- 注重积累的过程 快速锁定问题解决问题 写博客，在积累源码,持续更新技术博客,加分项...

css3制作邮票(锯齿边框)

html:

css:

body,h1,h2,h3,h4,ul,li,div,a,p{

margin: 0;

padding: 0;

font-family: arial;

}

body{

/*background-color: #2F3238;*/

background-color: skyblue;

}

.stamp{

width: 280px;

height: 180px;

display: inline-block;

padding: 10px;

background-image: radial-gradient(transparent 0px, transparent 4px, white 4px,white);

/*下面两步出现 邮票的 锯齿效果*/

background-size: 20px 20px;

background-position: -10px -10px;

position: absolute;

top: 100px;

left: 100px;

}

.stamp:after{

content: "";

box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

z-index: -1;

}

注意：

先编写

样式编写的过程中，点阵图实现如下所示：

background-image: radial-gradient(transparent 0px, transparent 4px, white 4px,white);

background-size: 20px 20px;

锯齿边框实现：

background-position: -10px -10px;

然后在div中添加图片标签：

效果图下所示：

然后再给div添加 盒子阴影效果：

box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);

下面定位是对阴影位置的定位：

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

z-index: -1;

效果如下所示：