纯CSS3之五子棋（黑白棋）画法

无聊想用JS写个五子棋玩玩，这边先用CSS3画出了五子棋，感觉挺惊艳的。发上来看看

PS:第一次发博文T-T  此为个人原创。

不多说上图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:500px;
            height:500px;
            margin:100px auto;
            background:#F6D67B;
            border:1px dashed #ff0;
        }
        .white-chess{
            width:50px;
            height:50px;
            border-radius:50%;
            background:radial-gradient(15px 15px at 15px 15px,#fff,#e2e2e2);
            margin:50px auto;
            box-shadow:2px 2px 4px rgba(0,0,0,0.3);
        }
        .black-chess{
            width:50px;
            height:50px;
            border-radius:50%;
            background:radial-gradient(10px 10px at 15px 15px,#fff,#333);
            margin:50px auto;
            box-shadow:2px 2px 4px rgba(0,0,0,0.4);
        }
        .black-chess1{
            width:50px;
            height:50px;
            position:relative;
            border-radius:50%;
            background:#333;
            margin:50px auto;
            box-shadow:2px 2px 4px rgba(0,0,0,0.4);
        }
        .black-chess1:after{
            content: "";
            display: block;
            width: 20px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 4px;
            transform: rotate(-45deg);
            background: radial-gradient(20px 10px at 10px 5px,#fff,#aaa);
            box-shadow: 0 0 8px #fff;
        }
        .black-chess2{
            width:50px;
            height:50px;
            position:relative;
            border-radius:50%;
            background:#333;
            margin:50px auto;
            box-shadow:2px 2px 4px rgba(0,0,0,0.4);
        }
        .black-chess2:before{
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 10px;
            
            background: radial-gradient(20px 10px at 10px 5px,#fff,#aaa);
            box-shadow: 0 0 8px #fff;
        }
        .black-chess2:after{
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 28px;
            
            background: radial-gradient(20px 10px at 10px 5px,#fff,#aaa);
            box-shadow: 0 0 8px #fff;
        }
    </style>
    
</head>
<body>
    <div class="box">
        <div class="white-chess"></div>
        <div class="black-chess"></div>
        <div class="black-chess1"></div>
        <div class="black-chess2"></div>
    </div>
</body>
</html>

最后对box-shadow和background-gradient样式说明：

box-shadow属性值有4个参数：

第一个参数为阴影横向偏移，可为负数；
第二个参数为阴影竖向偏移，可为负数；
第三个参数为模糊度；
第四个参数为阴影颜色，可为rgba颜色；
background: radial-gradient(20px 10px at 10px 5px,#fff,#aaa);
 radial-gradient也就是径向渐变色，在这里的意思是(渐变大小)at(圆心坐标)，后面为渐变首尾颜色
posted @ 2016-10-28 18:09  FeeLinear（飞流）  阅读(1893)  评论(0)  编辑  收藏  举报