如何使这些除数成为最简单的盒子。我有这个简单的盒子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/