html - 用除数制作4个像元

如何使这些除数成为最简单的盒子。我有这个简单的盒子html和CSS。
HTML代码是：

<div id="box"></div>

Box的CSS代码为：

#box{

    width: 350px;
    height: 200px;
    border-radius: 5px; /* IE10+ */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);

}

好。让我们去除数...我该怎么办？图片链接在这里：



谢谢

最佳答案

您将需要在背景上插入带有线条的背景图像，或者在框内创建部分并根据框在主框中的位置对框进行样式设置。

#box{
    width: 350px;
    height: 200px;
    border-radius: 5px; /* IE10+ */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
    font-size:0px;
}
.section{
  width:49.25%;
  height:49%;
  margin:0px;
  padding:0px;
  display:inline-block;
}

#top-left{
  border-bottom:5px solid white;
  border-right:5px solid white;
}

#top-right{
  border-bottom:5px solid white;
}

#bottom-left{
  border-right:5px solid white;
}

<div id="box">
  <div class="section" id="top-left"></div>
  <div class="section" id="top-right"></div>
  <div class="section" id="bottom-left"></div>
  <div class="section" id="bottom-right"></div>
</div>

关于html - 用除数制作4个像元，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35991328/