灵活运用CSS3特性绘制简易版围棋效果
|
副标题[/!--empirenews.page--]
渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋 效果图
实现代码
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3:画简易围棋：chess</title> <style> html { font-size: 50px; }
.chessboard {
-webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), -.1rem -.1rem .05rem rgba(0,0,0,.5) ;
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), -.1rem -.1rem .05rem rgba(0,0,0,.5) ; height: calc(19rem + 0.04rem); width: calc(19rem + 0.04rem); background: #daca39; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.04rem, white), color-stop(0, transparent)), -webkit-gradient(linear, left top, right top, color-stop(0.04rem, white), color-stop(0, transparent)); background-image: -webkit-linear-gradient(white 0.04rem, transparent 0), -webkit-linear-gradient(left, white 0.04rem, transparent 0); background-image: linear-gradient(white 0.04rem, transparent 0), linear-gradient(90deg, white 0.04rem, transparent 0); -webkit-background-size: 1rem 1rem; background-size: 1rem 1rem; }
.chess { position: relative; height: 1rem; width: 1rem; border-radius: 0.5rem; （编辑：厦门站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
