我做了一个input包含3行3列的正方形。但是，每个两个输入框之间的相交边界具有双倍粗细，因为其中一个边界在另一个边界上重叠，从而产生了双倍粗细。通过运行html以下内容，可以轻松理解这种情况。如何使边界只有一条线？
.container{
float:left;
margin-top: 20px;
width: 90px;
}
.box {
color: darkgreen;
font-size: 16px;
font-weight: bold;
text-align: center;
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid gray;
color:gray;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div class="container">
<input class="box" type="text""><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text"><input class="box" type="text">
</div>
</body>
</html>您可以通过仅删除某些元素的边框来实现。最简单的方法是nth-child()在元素上使用伪选择器，该选择器根据子元素的顺序选择HTML元素。下面的代码应该工作：
/* Add left and top border to all cells */
.box {
border: 0;
border-left: 1px solid gray;
border-top: 1px solid gray;
}
/* Add right border to elements at the end of rows */
.box:nth-child(3n) {
border-right: 1px solid gray;
}
/* Add bottom border to elements at the bottom */
.box:nth-child(n+7) {
border-bottom: 1px solid gray;
}
或者，您可以使用outline属性，该属性会在元素的边缘添加边框。确保将border属性本身设置为0，以避免边框比预期的粗。该代码将如下所示：
.box {
border: 0;
outline: 1px solid gray;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句