我想像图片中那样将此边框向左移动

Question

我想将边框向左移动，如下图所示：

我的代码是这样的：

div{
    border left: red 5px solid
}

Answer 1

.block{
  background: #ccc;
  padding: 16px;
}
.note{
  border-left: 5px solid red;
  padding-left: 16px;
  font-size: 25px;
}

<div class="block">
  <div class="note">This is an important note</div>
</div>

Answer 2

我明白你的意思了。因此，首先，您的 div 需要一个 class，这样它就不会影响每个 div。您还需要另一个 <div> 用于文本和边框。新代码：

<div class="warn">
    <div class="inner-warn">This is important note</div>
</div>

然后，CSS来了。首先，我们应该设置外部 <div> 的样式。我们将需要填充、背景颜色，您可能需要一些边框半径。填充应该在 7 pixels 左右。您的背景颜色可以类似于 #ddd。这就是我在你的照片中看到的。最后，边框半径可以是5 pixels，虽然你的图片没有，但我觉得这样更好看。你可以删除它。我们的外部 <div> 代码如下所示：

div.warn{
    padding: 7px;
    background-color: #ddd;
    border-radius: 5px;
}

现在我们有了内部 <div>。它应该包含一个红色的左边框（如您在代码中所说）和一些左填充以不“触摸”边框。我们的代码是这样的：

div.inner-warn{
    border-left: red 5px solid;
    padding-left: 5px;
}

完整代码：

<div class="warn">
    <div class="inner-warn">This is important note</div>
</div>
<style>
    div.warn{
        padding: 7px;
        background-color: #ddd;
        border-radius: 5px;
    }
    div.inner-warn{
        border-left: red 5px solid;
        padding-left: 5px;
    }
</style>

片段：

    div.warn{
        padding: 7px;
        background-color: #ddd;
        border-radius: 5px;
    }
    div.inner-warn{
        border-left: red 5px solid;
        padding-left: 5px;
    }

<div class="warn">
    <div class="inner-warn">This is important note</div>
</div>

看起来像这样：

我想像图片中那样将此边框向左移动

I want to budge this border to the left like in the pic

css

border