我試圖了解如何重疊單元格的兩個輪廓，以便兩個單元格共享 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 關注
- 141 瀏覽
添加回答
舉報
0/150
提交
取消