CSS 只绘制左边框和上边框，忽略右下角

Question

所以我有这个数组

[["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"],
    ["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"],
    ["1","1","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","1"],
    ["1","1","1","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","1","1"],
    ["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","0","0","1","1"],
    ["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"],
    ["0","0","0","0","0","0","0","0","0","1","1","0","0","0","0","0","0","0","0","0"],
    ["0","0","0","0","0","0","0","0","0","1","1","0","0","0","0","0","0","0","0","0"],
    ["0","0","0","0","0","0","0","0","0","1","1","0","0","0","0","0","0","0","0","0"],
    ["0","0","0","0","0","0","0","0","1","1","1","1","0","0","0","0","0","0","0","0"],
    ["0","0","0","0","0","0","0","1","1","1","1","1","1","0","0","0","0","0","0","0"],
    ["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"]]

代表这张地图

此函数将根据 1 相对于 0 的位置为空白图块绘制边框。

function lagTile(color,a,b){
var div=document.createElement("div");
var size=32;
div.style.width=div.style.height=size+"px";
div.style.left=a*size+"px";
div.style.top=b*size+"px";
canvas.appendChild(div);
if(color.substr(color.length-3,color.length)=="png"){
    div.style.backgroundImage="url(map/"+color+")";
}else{
    div.style.backgroundColor=color;
}
if(b>0 && map[b-1][a]==1 && map[b][a]==0)
{
    div.style.borderTop="4px solid #630";
    div.innerHTML="Top ";
}
if(b<map.length-1 && map[b+1][a]==1 && map[b][a]==0)
{
    div.style.borderBottom="4px solid #630";
    div.innerHTML+="Bottom ";
}
if(a<map[b].length-1 && map[b][a+1]==1 && map[b][a]==0)
{
    div.style.borderRight="4px solid #630";
    div.innerHTML+="Right ";
}
if(a>0 && map[b][a-1]==1 && map[b][a]==0)
{
    div.style.borderLeft="4px solid #630";
    div.innerHTML+="Left ";
}

并给出这个结果

如您所见，仅显示左边框和上边框。并且你可以看到文字明显是正确的。

关于为什么不绘制底部和右侧边框的任何建议？

Answer 1

边框与尺寸相加，因此元素会变大，并与后面的元素重叠（下方或右侧）。所以边界就在那里，只是隐藏在它之后绘制的框下方。请参阅 CSS Box Model 了解大小调整的工作原理。简而言之，你的盒子的总宽度是the width of the div + left border size + right border size。

您可以通过从 div 的大小中减去边框大小来解决此问题（例如，当您添加 4 像素的左边框时，您也会从宽度中移除 4 像素），或者在其样式中添加 box-sizing: border-box .