html - CSS 如何制作井字游戏发光板？

Question

这是我想要做的愿望设计

我想在井字游戏板上制作发光效果。我已经用 table 来制作板，但我无法做任何事情来制作发光板。我尝试使用盒子阴影，但它会影响所有方向。 这是我的 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 psudo 元素 '::before' 和 '::after' 来创建这样的效果。

• 对于圆形，我们将设置边框半径使其成为圆形，然后使用 '::before' 和 '::after' 设置内部和外部的盒子阴影。

• 对于十字，我们还使用了“::before”和“::after”，然后将其转换为 45 度 Angular 。使之成为对 Angular 线。当然还有盒子阴影来产生灯光效果。

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