css3棋子样式

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
button{ border:solid 0px red;}
.Wchess {
    position:relative;
    width: 27px;
    height: 27px;
    border-radius: 30px;
    background: radial-gradient( #e4e4e4 10%,#b7aaaa);
    box-shadow: 1px 1px 2px 0px #0000006e;
    font-size: 10px;
    line-height: 27px;
    text-align: center;
    color: #000000;
}

.Bchess {
    position: relative;
    width: 27px;
    height: 27px;
    border-radius: 30px;
    background: radial-gradient(#9E9E9E -100%, #000000 100%);
    box-shadow: 1px 1px 2px 0px #0000006e;
    font-size: 10px;
    line-height: 27px;
    text-align: center;
    color: #fff;
}
</style>

<button class="Wchess"></button>
白棋样式
<button class="Wchess">1</button>
<button class="Wchess">2</button>
<button class="Wchess">3</button>
<button class="Wchess">4</button>
<button class="Wchess">5</button>
<button class="Wchess">6</button>
<button class="Wchess">7</button>
<button class="Wchess">8</button>
<button class="Wchess">9</button>
<button class="Wchess">0</button>

<br />
<button class="Bchess"></button>
黑棋样式
<button class="Bchess">1</button>
<button class="Bchess">2</button>
<button class="Bchess">3</button>
<button class="Bchess">4</button>
<button class="Bchess">5</button>
<button class="Bchess">6</button>
<button class="Bchess">7</button>
<button class="Bchess">8</button>
<button class="Bchess">9</button>
<button class="Bchess">0</button>

<br />
<button class="Wchess"></button>
1500千米
<button class="Wchess">1</button>
<button class="Wchess">5</button>
<button class="Wchess">0</button>
<button class="Wchess">0</button>
<button class="Wchess">k</button>
<button class="Wchess">m</button>
<button class="Bchess">.</button>
<button class="Bchess">c</button>
<button class="Bchess">o</button>
<button class="Bchess">m</button>

运行结果