边框尺寸过大（不是完整的矩形）的问题

Question

当我设置较大的border-size

border: 1px solid #ced4da;
border-top: 6px solid #ffc107;

黄色的顶部边框（一个大6px）不是一个完整的矩形

我不知道这是什么

我想要这个

我该如何解决？

Answer 1

如果添加额外的HTML元素，有几种方法可以实现所需的目标，但是from kivy.app import App ModuleNotFoundError: No module named 'kivy.app'; 'kivy' is not a package 将允许您使用纯CSS。

box-shadow

div {
  height: 100px;
  border: 5px solid #ced4da;
  border-top: 6px solid #ffc107;
}

.square-top-fix {
  border-top: none;
  box-shadow: 0px -6px #ffc107;
}

Answer 2

如果您也有侧面边框，css中的边框将始终具有该倾斜边缘，例如：

div {
  width: 100px;
  height: 100px;
  border: 10px solid red;
  border-top: 10px solid blue;
 }

<div />

如果您希望顶部的“边框”是纯矩形，则可以像这样伪造它：

#div1 {
  width: 100px;
  height: 100px;
  border: 10px solid red;
 }
 
#div2 {
  /* Negative margin will move this div into the border */
  margin-left: -10px;
  margin-top: -10px;
  /* width = div width + border width * 2 */
  width: 120px;
  height: 10px;
  background: blue;
}

<div id="div1">
  <div id="div2">
    
  </div>
</div>

我希望这会有所帮助！ ：）