css3 实现邮票样式

http://jingyan.baidu.com/article/6181c3e0682901152ef153d7.html

css3 的优点我就不在这里赘述了，之前上高中的时候还会写信，贴邮票，但是好多年过去了，甚是怀念呀。直接切入今天的主题：用css3实现邮票的样式，最近在研究css3的背景径向渐变，background: radial-gradient，边查资料，边写代码，完成了这个邮票的样式。

工具/原料

• css3 gradient --> css3 渐变

• css3 :after   --> 伪类选择器

方法/步骤

1. 1

   css3 gradient：linear-gradient(线性渐变)、radial-gradient(径向渐变)。

   css3径向渐变的意思是圆形或椭圆形的渐变。一般颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。

   radial-gradient的使用规则：

   radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

2. 2

   主要属性参数如下：

   <position>：用来定义径向渐变的圆心位置。

                 如果这个参数省略了，其默认值为“center”。

   <shape>：用来定义径向渐变的形状。

              其主要包括两个值“circle”和“ellipse”。

   <size>:用来确定径向渐变的结束形状大小,如果省略了其默认值为“farthest-corner”。          可以给其显式的设置一些关键词，主要有：closest-side，closest-corner，            farthest-side，farthest-corner

   <color-stop>：径向渐变线上的停止颜色。transparent为透明的，white为白色，等等

   对于gradient的属性的详细介绍就不在这里赘述了，其他的前端网站上都说得比较详细。

3. 3

   html code：

   <div class="stamp">

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

   </div>

4. 4

   css3 code：

   <style type="text/css">

   @charset "utf-8";

   /* CSS Document */

   body,h6,h5,h4,h3,h2,h1,ul,li,div,a,p

   {

   margin: 0;

   padding: 0;

     font-family: "Arial, Helvetica, sans-serif";

   }

   .stamp {

     position: absolute;

     left: 100px;

     top:100px;

     width: 280px;

     height: 180px;

     display: inline-block;

     padding: 10px;

     position: relative;

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

     background-size: 20px 20px;

     background-position: -10px -10px;

   }

   .stamp:after {

     content: '';

     position: absolute;

     left: 5px;

     top: 5px;

     right: 5px;

     bottom: 5px;

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

     z-index: -1;

   }

   </style>