http://jingyan.baidu.com/article/6181c3e0682901152ef153d7.html
css3 的优点我就不在这里赘述了,之前上高中的时候还会写信,贴邮票,但是好多年过去了,甚是怀念呀。直接切入今天的主题:用css3实现邮票的样式,最近在研究css3的背景径向渐变,background: radial-gradient,边查资料,边写代码,完成了这个邮票的样式。
方法/步骤
-
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>
-
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>