Question

CSS边框有点问题。我有9个摄像头直接流式传输到一个网页。我希望它们中的九个之间有一个整洁的白色1px边框，但无论我怎么努力，都没有骰子。目前我的代码是：

它应该给我一个整洁的1px边框，对吗？不。它给我的是：

body{
	background-color:#FFF;
	text-align:center;
	margin:0;
	padding:0;
	overflow:hidden;
}    
.cam{
	width: 33%; 
	height: auto; 
	float:left;
	border-style:solid;
	border-color:white;
	border-width:0px;
}

#topleft{
	border-bottom-width:1px;
	border-right-width: 1px;
}

#topright{
	border-bottom-width:1px;
	border-left-width: 1px;
}

#bottomleft{
	border-top-width:1px;
	border-right-width: 1px;
}

#bottomright{
	border-top-width:1px;
	border-left-width: 1px;
}

#middle{
	border-top-width:1px;
	border-left-width: 1px;
	border-bottom-width:1px; /*Note that I didn't even include the top border to try and fix the problem.*/
}

<img class="cam" src="*IP ADRESS*" id="topleft">
<img class="cam" src="*IP ADRESS*">
<img class="cam" src="*IP ADRESS*" id="topright">
<img class="cam" src="*IP ADRESS*">
<img class="cam" src="*IP ADRESS*" id="middle">
<img class="cam" src="*IP ADRESS*">
<img class="cam" src="*IP ADRESS*" id="bottomleft">
<img class="cam" src="*IP ADRESS*">
<img class="cam" src="*IP ADRESS*" id ="bottomright">

Answer 1

无需添加4或5 id，只需使用此 -

.cam + .cam {
    border-left: 1px solid #fff;
}

在每个之间获得垂直border。

现在对于水平border，这个应该做 -

.cam {
    border-bottom: 1px solid #fff;
}

然而，这个也在最后一个低点添加了一个水平border-bottom。要删除它，你可以这样做 -

.cam:nth-child(7), .cam:nth-child(8), .cam:nth-child(9) {
    border-bottom: none;
}

这是工作fiddle

Answer 2

试试这个..

＆＃13;

body {
  background-color: grey;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.cam {
  width: 33%;
  height: auto;
  float: left;
  border-style: solid;
  border-color: #fff;
  border-width: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

＆＃13;

<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="topleft">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="topright">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="middle">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="bottomleft">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg">
<img class="cam" src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" id="bottomright">

＆＃13;

目前您的宽度为33％，当您应用边框时，会为图像添加额外的宽度和高度。

通过应用border-box，您的图片将使用宽度+填充+边框来创建每个项目的33％宽度。

Answer 3

如果使用表格，border-collapse将解决此问题。

如果不使用表格，请运行下面的代码段，

＆＃13;

.cells {
  width: calc((100% - 2px)/3);
  height: 100px;
  float: right;
  background-color: #EFEFEF;
  border: 1px solid white;
  box-sizing: border-box;
  margin-top: -1px;
  margin-left: -1px;
}

＆＃13;

<div>
  <div class="cells cell-1"></div>
  <div class="cells cell-2"></div>
  <div class="cells cell-3"></div>
  <div class="cells cell-4"></div>
  <div class="cells cell-5"></div>
  <div class="cells cell-6"></div>
  <div class="cells cell-7"></div>
</div>

＆＃13;

CSS边界麻烦

3 个答案: