边框怎么做出这样的效果啊

Question

边框怎么做出这样的效果啊

Answer 1

border+一个absolute定位的和背景色一样的正方形div来实现。帮助到你能点个采纳吗，谢谢~

<style>
    .good{border-collapse:collapse;background:#5f5750}
    .good td{width:100px;height:100px;display:inline-block;position:relative;border:solid 1px #ccc}
    .good td div.square{position:absolute;bottom:-20px;right:-20px;background:#5f5750;width:40px;height:40px;z-index:9}
</style>
<table class="good">
    <tr><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td></td></tr>
    <tr><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td></td></tr>
    <tr><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td><div class="square"></div></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>