[摘录] CSS邮票样式

主要CSS特性：

css3 gradient --> css3 渐变

css3 :after   --> 伪类选择器

 

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

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

radial-gradient的使用规则：

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

主要属性参数如下：

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

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

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

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

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

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

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

 

HTML Code：

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

 

CSS Code：

<style type="text/css">

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>

 

 

结果如图：