↓返回底部
JS PHP HTML5 CSS3 jQuery SQL BootStrap5 Other
边框 方框 字体 选择器 其他

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>

运行结果

定义和用法

语法

参数值

返回值

  • Server Sent | 在线编辑 | 1.php |
  • 欢迎纠错:如果发现错误,请发到我的QQ:3166692976,感谢!
  • 本站及其内容仅作为站长本人学习探索之用途,不保证(包括但不限于)内容的准确性、有效性。本站保留解释权。
  • 心不得满,事不得全。鸟飞不尽,话说不完。休息一下吧!
  • 1500km.com,   Copyright ©2022,   all rights received.
  • ↑返回顶部