Css如何制作tic tac toe发光板？

Question

这是我想要的设计愿望

我想在tic tac toe板上发光效果。我已经用桌子来制作电路板，但我无法做任何事情来制作发光板。我尝试使用box-shadow但它会影响所有方向。这是我的HTML代码

    table tr:first-child td{
        border-top:none;
    }
    table tr:last-child td{
        border-bottom:none;
    }
    table tr td:first-child{
        border-left:none;
    }
    table tr td:last-child{
        border-right:none;
    }
.cell{
    width:115px;
    height:115px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    text-shadow:
      0 0 5px #fff,
      0 0 10px rgb(255, 0, 0),
      0 0 20px rgb(255, 0, 0),
      0 0 40px rgb(255, 102, 0),
      0 0 50px rgb(255, 102, 0),
      0 0 80px rgb(255, 102, 0);
    font-size:90px;
}

   <table>
        <tr>
            <td class="cell" id="0"></td>
            <td class="cell" id="1">X</td>
            <td class="cell-2" id="2">O</td>
        </tr>
        <tr>
            <td class="cell" id="3"></td>
            <td class="cell" id="4"></td>
            <td class="cell" id="5"></td>
        </tr>
        <tr>
            <td class="cell" id="6"></td>
            <td class="cell" id="7"></td>
            <td class="cell" id="8"></td>
        </tr>
    </table>

Answer 1

为了使光效，你需要的是box-shadow，你需要设置外部和内部的显示阴影，这样它会给你光传播效果。

检查附加的Fiddle。

我们将使用css伪元素':: before'和':: after'来创建这样的效果。

• 对于圆，我们将设置边界半径使其成为圆，然后使用':: before'和':: after'来设置内部和外部的box-shadow。
• 对于十字架，我们也使用':: before'和':: after'然后我们转换为45度角。然后做对角线。当然还有盒子阴影来发光效果。

table
{
  background:black; 
  box-shadow:0px 0px 6px 5px black;
}
table td
{
  padding:10px;
}

.sign
{
  height:40px;
  width:40px; 
  display:inline-block;   
  background-color:transparent;
  position:relative;
}

.sign_o
{    
  box-shadow:0px 0px 5px 3px #09de09;  
  border-radius:20px;  
}
.sign_o::after
{
  content:'';
  height:38px;
  width:38px;  
  border-radius:19px;
  border:1px solid white;
  display:inline-block; 
  position:absolute;
  top:0px;
  left:0px;
}
.sign_o::before
{
  content:'';
  height:40px;
  width:40px;    
  box-shadow:inset 0px 0px 5px 3px #09de09;
  border-radius:40px;
  display:inline-block; 
  position:absolute;
  top:0px;
  left:0px;
}

.sign_x
{
      
}
.sign_x::after
{  
  content:'';
  height:2px;
  width:46px;  
  box-shadow:0px 0px 5px 3px red;    
  display:inline-block;   
  background-color:white;
  position:absolute;
  
   -webkit-transform:translateY(22px)
                     translateX(-4px)
                     rotate(45deg);                     
}

.sign_x::before
{
  content:'';
  height:46px;
  width:2px;  
  box-shadow:0px 0px 5px 3px red;    
  display:inline-block;   
  background-color:white;
  position:absolute;
     -webkit-transform:
          translateY(0px)
          translateX(18px)
          rotate(45deg);
}

table tr:first-child
{
  box-shadow:0px 8px 5px -5px white;  
}

table tr:nth-child(2)
{
  box-shadow:0px -8px 5px -5px white
        , 0px 8px 5px -5px white;
}

table tr:last-child
{
  box-shadow:0px -8px 5px -5px white;  
}

table tr td:first-child
{
  box-shadow:8px 0px 5px -5px white;  
}


table tr td:nth-child(2)
{
  box-shadow:-8px 0px 5px -5px white
        , 8px 0px 5px -5px white;
}

table tr td:last-child
{
  box-shadow:-8px 0px 5px -5px white;  
}

<table>
    <tr>
        <td class="cell" id="0">
          <span class='sign sign_o'></span>
        </td>
        <td class="cell" id="1">          
        </td>
        <td class="cell-2" id="2">
          <span class='sign sign_x'></span>
        </td>
    </tr>
    <tr>
        <td class="cell" id="3"></td>
        <td class="cell" id="4">
          <span class='sign sign_o'></span>
        </td>
        <td class="cell" id="5"></td>
    </tr>
    <tr>
        <td class="cell" id="6">
          <span class='sign sign_x'></span>
        </td>
        <td class="cell" id="7"></td>
        <td class="cell" id="8">
          <span class='sign sign_o'></span>
        </td>
    </tr>
</table>

更新 - 行/列框阴影。 Fiddle

Answer 2

您可以尝试使用这样的伪元素：

.cell {
  width: 115px;
  height: 115px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px rgb(255, 0, 0), 0 0 20px rgb(255, 0, 0), 0 0 40px rgb(255, 102, 0), 0 0 50px rgb(255, 102, 0), 0 0 80px rgb(255, 102, 0);
  font-size: 90px;
}

table {
  position: relative;
  overflow: hidden;
}

table:before {
  content: "";
  position: absolute;
  right: 115px;
  top: -10px;
  bottom: -10px;
  width: 118px;
  border-right: 2px solid blue;
  border-left: 2px solid blue;
  box-shadow: 0px 0px 7px 2px blue, inset 0px 0px 7px 2px blue;
}

table:after {
  content: "";
  position: absolute;
  top: 115px;
  right: -10px;
  left: -10px;
  height: 118px;
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
  box-shadow: 0px 0px 7px 2px blue, inset 0px 0px 7px 2px blue;
}

<table>
  <tr>
    <td class="cell" id="0">O</td>
    <td class="cell" id="1">X</td>
    <td class="cell" id="2">O</td>
  </tr>
  <tr>
    <td class="cell" id="3">X</td>
    <td class="cell" id="4">X</td>
    <td class="cell" id="5">X</td>
  </tr>
  <tr>
    <td class="cell" id="6">O</td>
    <td class="cell" id="7">O</td>
    <td class="cell" id="8">X</td>
  </tr>
</table>

Answer 3

这是一个如何做到的基本示例。您可以调整它以符合您的要求。

td {
  border: 2px solid rgb(10, 162, 179);
  font-size: 50px;
  padding: 30px 30px;
 -webkit-filter: drop-shadow(0px 0px 5px rgba(3, 109, 121, 0.8));
}

table tr:first-child td{
    border-top:none;
}
table tr:last-child td{
    border-bottom:none;
}
table tr td:first-child{
    border-left:none;
}
table tr td:last-child{
    border-right:none;
}

<table>
        <tr>
            <td class="cell" id="0"></td>
            <td class="cell" id="1"></td>
            <td class="cell-2" id="2"></td>
        </tr>
        <tr>
            <td class="cell" id="3"></td>
            <td class="cell" id="4"></td>
            <td class="cell" id="5"></td>
        </tr>
        <tr>
            <td class="cell" id="6"></td>
            <td class="cell" id="7"></td>
            <td class="cell" id="8"></td>
        </tr>
    </table>