html - 左下边框

Question

想象一下(或者如果您无法想象，请观看)这段代码:

<div class="block"></div>
<style>
  .block {
    width: 10px;
    height: 10px;
    display: block;
    background-color: red;
    border: 1px solid #000000;
    border-bottom: 0;
}
</style>

现在看看底线。这是我的问题；我希望左右边框长 1px(所以底部边框是左边框和右边框之间的部分)。
这有可能实现吗？？

Answer 1

这是一种方法，因为盒子模型不支持你所需要的，只使用一个div:

<div class="block"><div></div></div>

和CSS:

.block {
    width: 10px;
    height: 10px;
    border: 1px solid #000000;
    border-bottom: 0;
    padding-bottom: 1px;
}

.block div {
    width: 10px;
    height: 10px;
    background-color: red;
}

这将在左侧和右侧扩展 1px 的黑色边框。