這篇文章主要介紹了關于如何用純CSS實現一副國際象棋 ，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

源代碼下載

每日前端實戰系列的全部源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，一共 8 個列表，每個列表包含 8 個元素：

居中顯示：body {

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-color: darkslategray;

}

定義容器的背景色和尺寸(由字號決定尺寸)：.chess {

background-color: burlywood;

font-size: 32px;

}

畫出網格狀棋盤：ul {

display: table;

margin: 0;

padding: 0;

}

li {

display: table-cell;

width: 1.5em;

height: 1.5em;

}

設置網格交錯的顏色：ul:nth-child(odd) li:nth-child(even),

ul:nth-child(even) li:nth-child(odd) {

background-color: rgba(0, 0, 0, 0.6);

}

在棋盤上安放棋子：

• ?
• ?
• ?
• ?
• ?
• ?
• ?
• ?

• ?
• ?
• ?
• ?
• ?
• ?
• ?
• ?

• ?
• ?
• ?
• ?
• ?
• ?
• ?
• ?

• ?
• ?
• ?
• ?
• ?
• ?
• ?
• ?

設置棋子的顏色：ul:nth-child(-n+2) {

color: black;

}

ul:nth-child(n+7) {

color: white;

}

最后，為棋盤增加一點立體效果：.chess {

border: 0.2em solid tan;

box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);

}

大功告成！

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

總結

以上是生活随笔為你收集整理的HTML5绘制国际象棋,如何用纯CSS实现一副国际象棋的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。