html - 不能在一侧设置边界半径，在另一侧设置常规边界

Question

出于某种原因，我的常规半透明右边框不适用于左侧和底部具有边框半径的元素。我该如何解决？

见片段和codepen：

body {
  background: red;
}

.item {
  margin-left: 10px;
}

.box {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  line-height: 10px;
  margin-left: -5px;
  display: inline-block;
  width: 300px;
  background: white;
}

.border {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

<div id="container">
  <div class="box border">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
</div>

标签： htmlcssborderinlinedisplay

Answer 1

不要使用负边距来删除元素之间的空间inline。将 设置font-size为零container并将其重置box- 现在看看问题如何自行解决：

body {
  background: red;
}

.item {
  margin-left: 10px;
}

#container {
  font-size: 0; /* ADDED */
}

.box {
  font-size: initial; /* ADDED */
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  line-height: 10px;
  /*margin-left: -5px;*/
  display: inline-block;
  width: 300px;
  background: white;
}

.border {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

<div id="container">
  <div class="box border">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
</div>