重叠单元格的轮廓
我试图了解如何重叠单元格的两个轮廓，以便两个单元格共享 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
你必须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>
随时随地看视频慕课网APP
相关分类
Html5