无聊想用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(圆心坐标)，后面为渐变首尾颜色
时间： 2024-10-10 12:26:19