CSS只绘制左边框和顶边框，忽略右边和底边

Question

所以我有这个数组

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 ";
}

代表这张地图

此功能将根据1相对于0的位置绘制边框到空白图块。

res = lapply(matlist, function(x) Map(`+`, head(x,-1), tail(x,-1)))

# sample of the result:
res[[1]][1:2]
# $`1`
#      [,1] [,2]
# [1,]   14    3
# [2,]   19   19
# 
# $`2`
#      [,1] [,2]
# [1,]   45   15
# [2,]   58   17

并给出了这个结果

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

有关未绘制底部和右边框的原因的任何建议吗？

Answer 1

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

您可以通过从div的大小中减去边框大小来解决此问题（例如，当您添加4px的左边框时，也可以从宽度中删除4px），或者添加box-sizing: border-box他们的造型。