CSS3: 画围棋及棋盘

最新推荐文章于 2024-07-13 14:53:05 发布

crper

最新推荐文章于 2024-07-13 14:53:05 发布

阅读量4.7k

点赞数 10

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： css3 css3围棋 css3棋子 css3围棋实现

本文链接：https://blog.csdn.net/crper/article/details/52675956

版权

笔记-HTML4&5/CSS2.1&3 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

CSS3及HTML5折腾记

23 篇文章 25 订阅

订阅专栏

前言

渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋

效果图

这里写图片描述

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3:画简易围棋：chess</title>
    <style>
        html {
            font-size: 50px;
        }
        
        .chessboard {
            
            -webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
                         -.1rem -.1rem .05rem rgba(0,0,0,.5) ;
            
                    box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
                         -.1rem -.1rem .05rem rgba(0,0,0,.5) ;
            height: calc(19rem + 0.04rem);
            width: calc(19rem + 0.04rem);
            background: #daca39;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.04rem, white), color-stop(0, transparent)), -webkit-gradient(linear, left top, right top, color-stop(0.04rem, white), color-stop(0, transparent));
            background-image: -webkit-linear-gradient(white 0.04rem, transparent 0), -webkit-linear-gradient(left, white 0.04rem, transparent 0);
            background-image: linear-gradient(white 0.04rem, transparent 0), linear-gradient(90deg, white 0.04rem, transparent 0);
            -webkit-background-size: 1rem 1rem;
                    background-size: 1rem 1rem;
        }
        
        .chess {
            position: relative;
            height: 1rem;
            width: 1rem;
            border-radius: 0.5rem;
            -webkit-box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset;
                    box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset;
        }
        
        .chess-white {
            left:.5rem;
            top:.5rem;
            background: #EEE;
        }
        
        .chess-black {
            background: #000;
            left:10.5rem;
            top:10.5rem;
        }
    </style>
</head>

<body>
    <div class="chessboard">
        <div class="chess chess-white"></div>
        <div class="chess chess-black"></div>
    </div>

</body>

</html>