171 lines
3.4 KiB
CSS
171 lines
3.4 KiB
CSS
* {
|
||
/* 清除默认的外边距和内边距 */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body {
|
||
background-color: #ececec;
|
||
/* 初始化select标签的样式 */
|
||
/* 其中的-xx-xx是浏览器的私有前缀，这么写可以保证兼容性
|
||
也就是各个浏览器下样式表现一致
|
||
*/
|
||
-moz-user-select: none;
|
||
-webkit-user-select: none;
|
||
-ms-user-select: none;
|
||
-khtml-user-select: none;
|
||
user-select: none;
|
||
}
|
||
#ground {
|
||
/* 设置棋盘外部容器的大小，并为其添加绝对定位以及溢出隐藏 */
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
}
|
||
#board {
|
||
/* 添加棋盘样式并通过绝对定位固定其位置 */
|
||
width: 401px;
|
||
height: 451px;
|
||
padding: 30px;
|
||
background-color: #8f7a66;
|
||
position: relative;
|
||
top: 45%;
|
||
left: 0;
|
||
right: 0;
|
||
margin: -220px auto;
|
||
border: 3px solid rgb(192, 166, 137);
|
||
border-radius: 2px;
|
||
box-shadow: 0 0 25px rgba(143, 97, 76, 0.35);
|
||
}
|
||
#board #line {
|
||
/* 设置棋盘中的格子线的样式 */
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#board #line #rows {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
#board #line #lines {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
top: -100%;
|
||
overflow: hidden;
|
||
}
|
||
#board #line .row {
|
||
width: 100%;
|
||
height: 1px;
|
||
background-color: #571b16;
|
||
margin-bottom: 49px;
|
||
}
|
||
#board #line .line {
|
||
width: 1px;
|
||
height: 100%;
|
||
background-color: #571b16;
|
||
margin-right: 49px;
|
||
float: left;
|
||
}
|
||
#board #line .end {
|
||
margin: 0;
|
||
}
|
||
#board #line #river {
|
||
width: 461px;
|
||
height: 100%;
|
||
position: relative;
|
||
top: -200%;
|
||
left: -30px;
|
||
}
|
||
#board #line #river article {
|
||
position: relative;
|
||
top: 201px;
|
||
width: 100%;
|
||
height: 49px;
|
||
background-color: rgba(143, 122, 102, 0.95);
|
||
/*background-image: url("ass/Riv.png");*/
|
||
box-shadow: inset 0 0 25px rgba(79, 139, 191, 0.55);
|
||
font-family: Arial, sans-serif;
|
||
font-size: 45px;
|
||
text-align: center;
|
||
letter-spacing: 1px;
|
||
color: #817c77;
|
||
opacity: 0.95;
|
||
}
|
||
#board #flower {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
top: -300%;
|
||
overflow: hidden;
|
||
}
|
||
#board #flower article {
|
||
width: 25px;
|
||
height: 25px;
|
||
position: relative;
|
||
left: 37px;
|
||
top: 37px;
|
||
float: left;
|
||
border: 1px solid rgba(134, 42, 3, 0.55);
|
||
transform: rotate(45deg);
|
||
}
|
||
#board #flower .L2 {
|
||
width: 100%;
|
||
height: 50px;
|
||
}
|
||
#board #flower .L5 {
|
||
width: 100%;
|
||
height: 50px;
|
||
}
|
||
/* 使用子代选择器设置.L2中第二个article的样式 */
|
||
#board #flower .L2 article:nth-child(2) {
|
||
margin-left: 273px;
|
||
}
|
||
#board #flower .L5 article:nth-child(1n + 2) {
|
||
margin-left: 73px;
|
||
}
|
||
#board #flower .L5 article:nth-child(1) {
|
||
margin-left: -50px;
|
||
}
|
||
#board #flower .L5 article:nth-child(2) {
|
||
margin-left: 50px;
|
||
}
|
||
#board #flower #F {
|
||
margin-top: 50px;
|
||
height: 200px;
|
||
}
|
||
#board #cross {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
top: -400%;
|
||
}
|
||
#board #cross #T {
|
||
width: 100%;
|
||
height: 200px;
|
||
margin-bottom: 51px;
|
||
}
|
||
#board #cross #B {
|
||
width: 100%;
|
||
height: 200px;
|
||
}
|
||
#board #cross article {
|
||
margin: 0 auto;
|
||
width: 140px;
|
||
height: 1px;
|
||
position: relative;
|
||
top: 50px;
|
||
background-color: #752e2b;
|
||
}
|
||
#board #cross article:nth-child(1) {
|
||
transform: rotate(45deg);
|
||
}
|
||
#board #cross article:nth-child(2) {
|
||
margin-top: -1px;
|
||
transform: rotate(-45deg);
|
||
}
|
||
#board #cross #B article {
|
||
position: relative;
|
||
top: 149px;
|
||
}
|