主要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>