我们可以通过多种css3渐变的叠加制作各种各样好看的花纹
css3中.如果有多种渐变叠加,先写的渐变会覆盖后写的渐变.
制作格子花纹:
代码如下:
.bg{width: 120px;height: 200px;background-color: #282828;background-image:/*第一行*/-webkit-radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),/*第二行*/-webkit-radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),/*在两条底边加上黑色边边,增强立体感*/-webkit-radial-gradient(black 15%,transparent 16%),-webkit-radial-gradient(black 15%,transparent 16%);/*4个渐变的渐变位置*/background-position: 0 0px,8px 8px,0 1px,8px 9px;background-size: 16px 16px;}
制作原型相交花纹:
代码如下:
.p20{width: 300px;height: 300px;background:#394057;background-image:radial-gradient(closest-side, transparent 98%,rgba(0,0,0,1) 99%),radial-gradient(closest-side,transparent 98%,rgba(0,0,0,1) 99%);/*上下两个圆错开相交*/background-position: 0 0px,40px 40px;background-size: 80px 80px;}
