如何用純CSS實現一副國際象棋

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

原始碼下載

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

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

代碼解讀

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

<p class="chess">    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul></p>

置中顯示：

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);}

在棋盤上安放棋子：

<p class="chess">    <ul>        <li>&#9820;</li>        <li>&#9822;</li>        <li>&#9821;</li>        <li>&#9819;</li>        <li>&#9818;</li>        <li>&#9821;</li>        <li>&#9822;</li>        <li>&#9820;</li>    </ul>    <ul>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li></li><li></li><li></li><li></li>        <li></li><li></li><li></li><li></li>    </ul>    <ul>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>        <li>&#9823;</li>    </ul>    <ul>        <li>&#9820;</li>        <li>&#9822;</li>        <li>&#9821;</li>        <li>&#9819;</li>        <li>&#9818;</li>        <li>&#9821;</li>        <li>&#9822;</li>        <li>&#9820;</li>    </ul></p>

設定棋子的顏色：

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);}

大功告成！

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！