Question

我正在尝试使用自定义颜色制作面板。此案例颜色为橙色。从this示例中可以看出，底角没有着色。

HTML

<div class="col-md-6">
<div class="panel color-orange">
<div class="panel-heading text-white text-center">
  text
</div>
<div class="panel-body color-white">
<div class="col-md-8" style="height:200px">
    SignUp to the system
 </div>
 <div class="col-md-4" style="height:100px">
      SignUp to the system
 </div>
 <div class="col-md-4" style="height:100px">
      SignUp to the system
 </div>
 </div>
 </div>
 </div>


CSS

.color-orange {
 background: #fa7921;
 }

.color-white {
 background: white;
 }

有谁知道如何解决这个问题？

提前谢谢！

Answer 1

为整个面板添加边框。

<div class="col-md-6">
  <div class="panel color-orange">
    <div class="panel-heading text-white text-center">
      text
    </div>
    <div class="panel-body color-white border-orange">
      <div class="col-md-8" style="height:200px">
        SignUp to the system
      </div>
      <div class="col-md-4" style="height:100px">
          SignUp to the system
      </div>
      <div class="col-md-4" style="height:100px">
          SignUp to the system
      </div>
    </div>
  </div>
</div>

并在css中

.color-orange {
  background: #fa7921;
  // new border style
  border: solid 1px #fa7921;
}

.color-white {
  background: white;
}

具有自定义颜色的

1 个答案: