灵活运用CSS3特性绘制简易版围棋效果
|
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 class="chessboard"> <div class="chess chess-white"></div> <div class="chess chess-black"></div> </div>
</body>
</html> 总结 注意点： 阴影和渐变是可以多重覆盖应用的，控制好可以制作很多不错的效果 （编辑：温州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
