我试图了解如何重叠单元格的两个轮廓，以便两个单元格共享 1px。下面是我的 HTML 和 Js 代码：function genDivs(rows, cols){ var e = document.getElementById("gridContainer"); for(var r = 0; r < rows; r++) { var row = document.createElement("div"); row.className = "row"; for(var c = 0; c < cols; c++) { var cell = document.createElement("div"); if(r == 10 && c == 20) cell.className = "gridsquare begin"; else if(r == 10 && c == 40) cell.className = "gridsquare end"; else cell.className = "gridsquare"; row.appendChild(cell); } e.appendChild(row); }}genDivs(10, 20);<!DOCTYPE html><html><head> <style> #gridContainer { } .row { display: block; } .gridsquare { width: 25px; height: 25px; outline: 1px solid rgb(175, 216, 248); display: inline-block; margin-bottom: -4px; margin-left: 0px; } .begin { background-color: purple; } .end { background-color: magenta; } </style></head><body> <div id="gridContainer"></div> <script type="text/javascript" src="HomeScript.js"></script></body></html>我尝试使用边框代替轮廓，但结果是不均匀的 1 px 边框，例如，边框是 1px 1px 1px 1px 2px 1px 1px 1px 1px 2px 等等...任何帮助将不胜感激。
1 回答
慕无忌1623718
TA贡献1744条经验 获得超4个赞
你必须box-shawdow为此使用：
function genDivs(rows, cols) {
var e = document.getElementById("gridContainer");
for (var r = 0; r < rows; r++) {
var row = document.createElement("div");
row.className = "row";
for (var c = 0; c < cols; c++) {
var cell = document.createElement("div");
if (r == 10 && c == 20)
cell.className = "gridsquare begin";
else if (r == 10 && c == 40)
cell.className = "gridsquare end";
else
cell.className = "gridsquare";
row.appendChild(cell);
}
e.appendChild(row);
}
}
genDivs(10, 20);
#gridContainer {}
.row {
display: block;
}
.gridsquare {
width: 25px;
height: 25px;
box-shadow: 0 0 0 1px rgb(175, 216, 248) inset, 0 0 0 1px rgb(175, 216, 248);
margin-bottom: -4px;
margin-left: 0px;
display: inline-block;
}
.begin {
background-color: purple;
}
.end {
background-color: magenta;
}
<body>
<div id="gridContainer"></div>
<script type="text/javascript" src="HomeScript.js"></script>
</body>
- 1 回答
- 0 关注
- 89 浏览
添加回答
举报
0/150
提交
取消