gpt4 book ai didi

CSS,将线条和形状强加到按钮上?

转载 作者:太空宇宙 更新时间:2023-11-04 02:02:07 25 4
gpt4 key购买 nike

我正在尝试制作一款五子棋游戏。棋盘看起来像一个规则的网格,除了棋子被放置在交叉点而不是空间上。

looks like this

到目前为止,我有一个这样的网格 tic-tac-toe example来自 Reactjs 教程。

它的相关 CSS 是:

.board-row:after {
clear: both;
content: "";
display: table;
}

.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}

.square:focus {
outline: none;
}

他们制作了一个按钮网格,其中每个空格都是一个按钮。但是我需要让我的交叉点可点击,而不是空格。我打算制作像 my buttons 这样的按钮这个,为了做板子。蓝色边框将不可见,我画了它们以清楚地看到每个按钮。最后一个黑色圆圈是在交叉点演奏的曲子。

如何将这些线条和圆圈添加到我的按钮中?或者有更好的方法吗?谢谢。

最佳答案

好吧,如果你有一个 div,你可以这样做

div {
width: 100px;
height: 100px;
position: relative;
outline: 1px solid red;
}

div:after{
content: '';
position: absolute;
background-color: black;
top:0;
bottom: 0;
left: 45px;
right: 45px;
}


div:before{
content: '';
position: absolute;
background-color: black;
top:45px;
bottom: 45px;
left: 0;
right: 0;
}

工作示例 http://jsbin.com/mupucurebi/edit?html,css,js,output

关于CSS,将线条和形状强加到按钮上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41574095/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com