Question

html如图这种样式怎么做出来，只有里面有边框（边框是虚线，1px）

Answer 1

按照图中的效果，可以判断出边框为虚线，且外圈没有边框。示例如下：

HTML代码：

<ul>
    <li>纸尿裤</li>
    <li>奶粉</li>
    <li>儿童羽绒服</li>
    <li>婴幼服饰</li>
    <li>洗护喂养</li>
    <li>车床寝居</li>
    <li>玩具文具</li>
    <li>妈咪专区</li>
    <li>男童装童鞋</li>
    <li>女童装童鞋</li>
</ul>

CSS代码：

ul, li{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
ul{
    width: 200px;
    font-size: 0;
}
li{
    font-size: 14px;
    display: inline-block;
    width: 50%;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-bottom: 1px dashed #ccc;
}
li:nth-child(odd){
    border-right: 1px dashed #ccc;
}
li:nth-child(n+9){
    border-bottom: none;
}

浏览效果：

追问

哇，谢谢大神