利用css绘画棋盘布局（象棋）

代码如下：

<div class="g-grid"> 楚河      汉界</div>

.g-grid {
  position: relative;
  margin: auto;
  width: 401px;
  height: 451px;
  outline: 1px solid #000;
  outline-offset: 5px;
  background:
    linear-gradient(#fff, #fff),
    repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px),
    repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 50px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
    linear-gradient(45deg, transparent, 
        transparent calc(50% - 0.5px), 
        #000 calc(50% - 0.5px), 
        #000 calc(50% + 0.5px), 
        transparent calc(50% + 0.5px), 
        transparent 0),
    repeating-linear-gradient(45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
    linear-gradient(-45deg, transparent, 
        transparent calc(50% - 0.5px), 
        #000 calc(50% - 0.5px), 
        #000 calc(50% + 0.5px), 
        transparent calc(50% + 0.5px), 
        transparent 0),
    repeating-linear-gradient(-45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
    linear-gradient(45deg, transparent, 
        transparent calc(50% - 0.5px), 
        #000 calc(50% - 0.5px), 
        #000 calc(50% + 0.5px), 
        transparent calc(50% + 0.5px), 
        transparent 0),
    repeating-linear-gradient(45deg, transparent 0, transparent 5px, #fff 5px, #fff 10px),
    linear-gradient(-45deg, transparent, 
        transparent calc(50% - 0.5px), 
        #000 calc(50% - 0.5px), 
        #000 calc(50% + 0.5px), 
        transparent calc(50% + 0.5px), 
        transparent 0);
  background-repeat: no-repeat;
  background-size: 
    calc(100% - 2px) 49px, 100% 100%, 100% 100%, 
    100px 100px, 100px 100px, 100px 100px, 100px 100px,
    100px 100px, 100px 100px, 100px 100px, 100px 100px;
  background-position: 
    1px 201px, 0 0, 0 0, 
    151px 0, 151px 0, 151px 0, 151px 0,
    151px 350px, 151px 350px, 151px 350px, 151px 350px;
  line-height: 451px;
  font-size: 24px;
  text-align: center;
  letter-spacing: 12px;
  white-space: pre-wrap;
} 
.g-grid::before {
  content: "";
  position: absolute;
  top: 95px;
  left: 35px;
  width: 10px;
  height: 1px;
  background: #000;
  color: #000;
  box-shadow: 
    20px 0, 0 10px, 20px 10px,
    300px 0, 320px 0, 300px 10px, 320px 10px,
    -30px 50px, -30px 60px,
    50px 50px, 50px 60px, 70px 50px, 70px 60px,
    150px 50px, 150px 60px, 170px 50px, 170px 60px,
    250px 50px, 250px 60px, 270px 50px, 270px 60px,
    350px 50px, 350px 60px;
  -webkit-box-reflect: below 259px;
}
.g-grid::after {
  content: "";
  position: absolute;
  top: 85px;
  left: 45px;
  width: 1px;
  height: 10px;
  background: #000;
  color: #000;
  box-shadow: 
    10px 0, 0 20px, 10px 20px,
    300px 0px, 300px 20px, 310px 0, 310px 20px,
    -40px 50px, -40px 70px,
    50px 50px, 50px 70px, 60px 50px, 60px 70px,
    150px 50px, 150px 70px, 160px 50px, 160px 70px,
    250px 50px, 250px 70px, 260px 50px, 260px 70px,
    350px 50px, 350px 70px;
  -webkit-box-reflect: below 260px;
}

span点击事件后实现点击事件禁用（类似按钮disabeld方法）

如何利用css语法控制文本显示行数

css如何去掉滚动条占用的高度

利用css实现文本的单行溢出省略和多行溢出省略

css如何解决文字和图片对不齐的问题

标签： css, 绘画, 象棋

上面是“利用css绘画棋盘布局（象棋）”的全面内容，想了解更多关于 好玩 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2425.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！