Question

首先，我希望黑色右边框位于框右侧的几个像素，因此它不会粘在它上面（因此它就像分隔线一样）。

其次，我想要它，所以最后一个div没有边框，但是其他每个都有，所以应该只有2个右边框。

＆＃13;

div {
  height: 100px;
  width: 100px;
  background-color: red;
  float: left;
  border-right: 5px solid black;
  margin: 20px;
}

＆＃13;

<div></div>
<div></div>
<div></div>

＆＃13;

我该怎么做？

我到目前为止尝试的是在框中添加填充以区分边框，但这不起作用，我也考虑使用div：last-child，但这不起作用

Answer 1

您需要background-clip: content-box和div:last-of-type { border: none; }。 Background-clip使背景不会使用填充区域。

这里是完整的CSS（请参阅fiddle）：

div {
  height: 100px;
  width: 100px;
  background-color: red;
  background-clip: content-box;
  padding: 20px;
  float: left;
  border-right: 5px solid black;
  margin-right: 5px;
}

div:last-of-type {
    border: none;
}

Answer 2

You can use a pseudo element, like this, where you give all but the first a "left border".

div {
  height: 100px;
  width: 100px;
  background-color: red;
  float: left;
  margin: 20px;
}
div ~ div::before {
  content: '';
  display: inline-block;
  height: 100%;
  margin-left:  -24px;
  border-right: 5px solid black;
}

<div></div>
<div></div>
<div></div>

Answer 3

另一种方法是使用非重复的背景图像而不是颜色，并设置所需的尺寸：

＆＃13;

protected void Page_Load(object sender, EventArgs e)
{
    ReportDocument crystalReport = new ReportDocument();
    crystalReport.Load(Server.MapPath("~/CrystalReport.rpt"));
    DataSet dsCustomers = GetData("select * from customers");
    crystalReport.SetDataSource(dsCustomers);
    CrystalReportViewer1.ReportSource = crystalReport;
    CrystalReportViewer1.DataBind();
}

＆＃13;

div {
  height: 100px;
  width: 100px;
  background-image: linear-gradient(red, red);
  background-size: 60px 100%;
  background-repeat: no-repeat;
  float: left;
  border-right: 5px solid black;
  margin: 20px;
}

＆＃13;

创建一个框分隔符

3 个答案: