css3制作邮票（锯齿边框）

css3制作邮票（锯齿边框）

html:

<div class="stamp">
	<img src="images/y2.jpg" width="280" height="180" />
</div>

css:

<style type="text/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;
	}
</style>

注意：

先编写

<div class="stamp">

</div>

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

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

background-size: 20px 20px;

锯齿边框实现：

background-position: -10px -10px;

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

<img src="images/y2.jpg" width="280" height="180" />

效果图下所示：

然后再给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;

效果如下所示：