我们可以通过多种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; }