需要将边界半径添加到元素的边界

Question

我要在list-item元素上添加一个左边框。边框宽度为4像素。另外，它需要有圆角（边界半径为4px）。

通过CSS可以做到吗？我已经看过一些教程，但无法通过CSS进行修复。

Answer 1

如果我理解正确，则希望左侧（边框）的条形顶部和底部均为圆形；如果您使用的是边框，则不能完全按照我的意图弯曲它，则需要单独创建此条以使其具有弯曲的角。

现在，您可以使用div，span甚至是:before之类的伪元素来构建此栏，这取决于您；但我只想通过以下示例向您展示我的意思背后的逻辑

.box {
  width: 200px;
  height: 50px;
}

.item {
  border-left: 4px solid blue;
  border-radius: 4px;
  /* Or
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  */
  padding-left: 10px;
}

.item2 {
  display: flex;
}

.item2 .bar {
  width: 4px;
  background-color: blue;
  border-radius: 4px;
  margin-right: 10px;
}

<div class="box item">
  <span>Your Text</span>
</div>

<hr>

<div class="box item2">
  <div class="bar">
  </div>
  <span>Your Text</span>
</div>

Answer 2

您可以通过伪类:before

完成此操作

h1 {
  position: relative;
  padding-left: 10px;
}
h1:before {
  content: '';
  height: 100%;
  width: 4px;
  border-radius: 10px;
  background: #000;
  display: block;
  position: absolute;
  left: 0;
}

<h1>Element Text</h1>