灵活运用CSS3特性绘制简易版围棋效果(3)

发布时间：2020-03-15 00:12 所属栏目：52 来源：站长网

导读：box-shadow:.01rem.01rem.1remrgba(0,0,0,.5),00.05remrgba(240,240,240,.5),.05rem.05rem.01remrgba(255,255,255,.15)inset,.1rem.1rem.1remrgba(255,255,255,.05)inset,-.05rem-.05rem.25remrgba(0,0,0,.15)inset

box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset;

}

.chess-white {

left:.5rem;

top:.5rem;

background: #EEE;

}

.chess-black {

background: #000;

left:10.5rem;

top:10.5rem;

}

</style>

</head>

<body>

</div>

</body>

</html>

总结

注意点：

阴影和渐变是可以多重覆盖应用的，控制好可以制作很多不错的效果
可以用rem结合calc来实现精准控制（棋盘的大小，棋子等）
阴影不单单只有偏移量和扩散范围，还能控制外阴影还是内阴影（默认是外阴影，内阴影写在最后一个参数 inset）
rem是计算的依旧是根元素的字体大小（html的font-size,常规浏览器默认是16px,也可以手动设置）

（编辑：ASP站长网）