Question

我想通过添加左边框来设置警告消息的样式。我做了这个，但左边框有问题，因为它没有放在红色边框内...它以某种方式移位到左边

HTML：

<div class="msg-warning">Random warning message</div>

CSS：

.msg-warning {
  border: 1px solid red;
  padding: 0px 5px;
  border-left-width: 12px;
}

.msg-warning {
  border-left-color: blue;
}

https://jsfiddle.net/uoedzqj1/

Answer 1

你可以尝试这样：

＆＃13;

.msg-warning {
  border: 1px solid red;
  padding: 0px 5px;
  border-left: none;
  box-shadow:-12px 0 blue;
  margin-left:12px;
}

＆＃13;

<div class="msg-warning">Random warning message</div>

＆＃13;

小提琴：https://jsfiddle.net/uoedzqj1/2/

Answer 2

这样的事情？在div div

中嵌套另一个.msg-warning

＆＃13;

.msg-warning {
  border: 1px solid red;
  padding: 0px 5px;
    padding-left: 0px;
}

.blue {
    display:inline-block;
    width: 12px;
    height: 100%;
    background-color: blue;
    margin-right: 5px;
}

＆＃13;

<div class="msg-warning"><div class="blue">&nbsp;</div>Random warning message</div>

＆＃13;

Answer 3

使用轮廓和边框属性：

 .msg-warning {
    outline: 1px solid lightGray;
    padding: 0px 5px;
    border-left:12px solid #FCF8E3;
  }

正确定位边框

3 个答案: