Question

我想用JavaScript构建一个基本的Checkers游戏。我决定首先使用HTML和CSS进行基本的硬编码布局，特别是在开始理解逻辑之前，先按顺序获取我的CSS类。我正在努力实现实际的Checkers件

我要使用的方法是有2种不同的类：2 x正方形-{color}和2 x格子-{color}。我希望能够在方格{color}的上方应用方格{{color}，其中方格是一个仍然具有方格{color}背景的圆圈

我对圆的处理方法是边界半径为50％。下面的代码不一定代表我所尝试的内容，而是经过数小时无法正确处理后当前的样子。

我尝试使用checker- {color}类创建正方形的子元素，但是它完全浪费了我的间距，我宁愿避免这种方法，而是按照上面的描述进行操作（如果可能）

.square_black, .square_white {
  width:72px;
  padding-bottom: 72px;
  float: left;
  margin:0.06px;
}

.square_black{
  background: #11141d;
}

.square_white {
  background: #ad724d;
}

#container{
  max-width: 600px;
  margin: 0 auto;
}

.checker_blue {
  background: darkblue;
  border-radius: 50%;
  width:100%;
  padding:100%;

}

<div id=container>
    <div class='square_black checker-blue'></div>
    <div class='square_white'></div>
    <div class='square_black checker-blue'></div>
    <div class='square_white'></div>
    <div class='square_black checker-blue'></div>
    <div class='square_white'></div>
    <div class='square_black checker-blue'></div>
    <div class='square_white'></div>
</div>

Answer 1

将伪元素与.checker-{color}一起使用以避免创建额外的元素，请禁用填充以避免出现额外的空间：

.square_black,
.square_white {
  width: 72px;
  padding-bottom: 72px;
  float: left;
}

.square_black {
  background: #11141d;
}

.square_white {
  background: #ad724d;
}

#container {
  max-width: 600px;
  margin: 0 auto;
}

.checker-blue {
  padding: 0;
}

.checker-blue:before {
  content: "";
  display: block;
  background: darkblue;
  border-radius: 50%;
  width: 100%;
  padding-top: 100%;
}

<div id=container>
  <div class='square_black checker-blue'></div>
  <div class='square_white'></div>
  <div class='square_black checker-blue'></div>
  <div class='square_white'></div>
  <div class='square_black checker-blue'></div>
  <div class='square_white'></div>
  <div class='square_black checker-blue'></div>
  <div class='square_white'></div>
</div>

另一个想法是考虑多个背景，您将需要较少的代码。诀窍是有一个透明颜色的圆，您只需使用变量即可更改颜色。

如果您不希望圆覆盖所有区域，请调整渐变的百分比值：

.square_black,
.square_white {
  width: 72px;
  padding-bottom: 72px;
  float: left;
  background: 
   radial-gradient(farthest-side,var(--c,transparent) 98%,transparent 100%),
   var(--b,transparent);
}

.square_black {
   --b:#11141d
}

.square_white {
   --b:#ad724d;
}

#container {
  max-width: 600px;
  margin: 0 auto;
}

.checker-blue {
  --c: darkblue;
}

<div id=container>
  <div class='square_black checker-blue'></div>
  <div class='square_white'></div>
  <div class='square_black checker-blue'></div>
  <div class='square_white'></div>
  <div class='square_black checker-blue'></div>
  <div class='square_white'></div>
  <div class='square_black checker-blue'></div>
  <div class='square_white'></div>
</div>

Answer 2

public function edit(Prototype $prototype)
{
   return view('prototypes.edit', compact('prototype'));
}

.square_black, .square_white {
  width:72px;
  padding-bottom: 72px;
  float: left;
  margin:0.06px;
  position: relative;
}

.square_black{
  background: #11141d;
}

.square_white {
  background: #ad724d;
}

#container{
  max-width: 600px;
  margin: 0 auto;
}

.checker_blue:after {
  content: "";
  display: block;
  background: darkblue;
  border-radius: 50%;
  width:80%;
  height:80%;
  position: absolute;
  left: 10%;
  top: 10%;

}

如何在CSS中表示Checkers件？

2 个答案: