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([[ || ] [at ]?,| at ,]?[,]+);

2. 2

   主要属性参数如下：

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

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

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

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

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

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

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

3. 3

   html code：

    

4. 4

   css3 code：