具有“ border-color：white”的Div呈现黑色边框颜色

Question

我想要一个带有白色内部边框的div（“应用”）。但是，由于某些原因，内部边框始终呈现为黑色。可能是什么原因？这是我的代码。

.background {
  background-color: grey;
}

.app {
  text-align: center;
  background-color: #efece5;
  max-width: 582px;
}

.inner-border {
  border-color: #fff;
  border: solid;
  border-width: 7px;
  padding: 5px;
}

<div class="background">
    <div class="app">
        <div class="inner-border">
            <div class="room-list">
                <div class="room-item">
                    Room info
                </div>
                <div class="room-item">
                    Room info
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

border: solid再次将颜色覆盖为黑色，因为这是一种简写形式。

您可以像这样将其放在其他CSS之前，覆盖border速记中的颜色

border: solid;
border-color: #fff;
border-width: 7px;

更清洁的选择是与border: 7px solid #fff;一起使用

Answer 2

border: 7px solid white;

.app {
  text-align: center;
  background-color: #efece5;
  max-width: 582px;
}

.inner-border {
  background-color: transparent;
  border: 7px solid white;
  padding: 5px;
}

.background {
  background-color: grey;
}

<div class="background">
    <div class="app">
        <div class="inner-border">
            <div class="room-list">
                <div class="room-item">
                    Room info
                </div>
                <div class="room-item">
                    Room info
                </div>
            </div>
        </div>
    </div>
</div>