Question

我使用box-shadow来实现列表元素之间的边界。我创建了flexbox .nav-tabs来强制列表元素的编组布局。但我不想要正确和底线，我想删除它，我怎么能删除它我改变了什么box-shadow: 25px 0 0 -23px gray, 0 25px 0 -23px gray;

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
}

.nav-tabs li {
  box-shadow: 25px 0 0 -23px gray, 0 25px 0 -23px gray;
  padding: 50px;
}

#container .nav-tabs {
  background-image: image(bg-line-bar.png);
  width: auto;
  height: auto;
}

#container .nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  border-width: 0;
}

#container .nav-tabs>li>a {
  border: none;
  color: #666;
}

#container .tab-pane {
  padding: 15px 0;
}

#container .tab-content {
  padding: 20px
}

#container .nav-tabs li.active a {
  border: none;
}

.block {
  width: 203px;
  height: 90px;
  /* margin-left: -45px; */
  margin: -28px -15px;
  padding: 34px 47px;
  text-align: center;
  display: inline-block;
  background: ;
  color: #a6a6a6;
}

.block:hover h1 {
  color: #000000;
}

.block:hover h5 {
  color: #A48973;
}

#base {
  background: #eee;
  display: inline-block;
  height: 120px;
  margin-left: -15px;
  margin-top: -25px;
  position: relative;
  text-align: center;
  width: 111%;
  padding: 5px 10px;
}

#base2 {
  background: #eee;
  display: inline-block;
  height: 120px;
  margin-left: -15px;
  margin-top: -25px;
  position: relative;
  text-align: center;
  width: 111%;
  padding: 5px 10px;
}

#base:before {
  border-bottom: 21px solid #eee;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  content: "";
  height: 0;
  left: 182px;
  position: absolute;
  top: -19px;
  width: 0;
}

#base2:before {
  border-bottom: 21px solid #eee;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  content: "";
  height: 0;
  left: 182px;
  position: absolute;
  top: -19px;
  width: 0;
}

.base-block {
  display: inline-block;
  height: 120px;
  width: 200px;
  margin: -15px;
  display: inline-block;
  text-align: center;
  margin-top: 25px;
}

.base-block h1,
h4 {
  color: #000000;
}

.base-block h5 {
  color: #A48973;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
        <div class="block block-1">
          <h1>$ 2,300</h1>
          <h5>Today Revenue</h5>
        </div>
      </a>
    </li>
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
        <div class="block block-2">
          <h1>$ 53,100</h1>
          <h5>Expected Revenue for this month
          </h5>
        </div>
      </a>
    </li>

    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
        <div class="block block-3">
          <h1>12
          </h1>
          <h5>Bookings taken today
          </h5>
        </div>
      </a>
    </li>

    <li role="presentation">
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
        <div class="block block-4">
          <h1>68%
          </h1>
          <h5>Total monthly occupancy
          </h5>
        </div>
      </a>
    </li>
  </ul>
  <!--Menu Part 02-->

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <div id="base">
        <div class="base-block">
          <h4>Today’s revenue
          </h4>
          <h1>$ 2,300</h1>
          <h5>5 Rooms sold
          </h5>
        </div>
        <div class="base-block">
          <h4>Todate/Month
          </h4>
          <h1>$ 41,000
          </h1>
          <h5>230 Rooms sold
          </h5>
        </div>

      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <div id="base2">
        <div class="base-block">
          <h4>Tentative bookings

          </h4>
          <h1>$ 4,500
          </h1>
          <h5>12 Bookings

          </h5>
        </div>
        <div class="base-block">
          <h4>Confirmed Bookings

          </h4>
          <h1>$ 43,000

          </h1>
          <h5>300 Bookings

          </h5>
        </div>

      </div>

    </div>
  </div>
</div>

Answer 1

您可以反转框阴影面并隐藏父版上的溢出。

这是从原始css修改的内容：

.nav-tabs {
  overflow:hidden;/*added*/
}

.nav-tabs li {
  box-shadow: -25px 0 0 -23px gray, 0 25px 0 -23px gray;/*update*/
}

＆＃13;

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  overflow:hidden;/*added*/
}

.nav-tabs li {
  box-shadow: -25px 0 0 -23px gray, 0 25px 0 -23px gray;/*update*/
  padding: 50px;
}

#container .nav-tabs {
  background-image: image(bg-line-bar.png);
  width: auto;
  height: auto;
}

#container .nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  border-width: 0;
}

#container .nav-tabs>li>a {
  border: none;
  color: #666;
}

#container .tab-pane {
  padding: 15px 0;
}

#container .tab-content {
  padding: 20px
}

#container .nav-tabs li.active a {
  border: none;
}

.block {
  width: 203px;
  height: 90px;
  /* margin-left: -45px; */
  margin: -28px -15px;
  padding: 34px 47px;
  text-align: center;
  display: inline-block;
  background: ;
  color: #a6a6a6;
}

.block:hover h1 {
  color: #000000;
}

.block:hover h5 {
  color: #A48973;
}

#base {
  background: #eee;
  display: inline-block;
  height: 120px;
  margin-left: -15px;
  margin-top: -25px;
  position: relative;
  text-align: center;
  width: 111%;
  padding: 5px 10px;
}

#base2 {
  background: #eee;
  display: inline-block;
  height: 120px;
  margin-left: -15px;
  margin-top: -25px;
  position: relative;
  text-align: center;
  width: 111%;
  padding: 5px 10px;
}

#base:before {
  border-bottom: 21px solid #eee;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  content: "";
  height: 0;
  left: 182px;
  position: absolute;
  top: -19px;
  width: 0;
}

#base2:before {
  border-bottom: 21px solid #eee;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  content: "";
  height: 0;
  left: 182px;
  position: absolute;
  top: -19px;
  width: 0;
}

.base-block {
  display: inline-block;
  height: 120px;
  width: 200px;
  margin: -15px;
  display: inline-block;
  text-align: center;
  margin-top: 25px;
}

.base-block h1,
h4 {
  color: #000000;
}

.base-block h5 {
  color: #A48973;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
        <div class="block block-1">
          <h1>$ 2,300</h1>
          <h5>Today Revenue</h5>
        </div>
      </a>
    </li>
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
        <div class="block block-2">
          <h1>$ 53,100</h1>
          <h5>Expected Revenue for this month
          </h5>
        </div>
      </a>
    </li>

    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
        <div class="block block-3">
          <h1>12
          </h1>
          <h5>Bookings taken today
          </h5>
        </div>
      </a>
    </li>

    <li role="presentation">
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
        <div class="block block-4">
          <h1>68%
          </h1>
          <h5>Total monthly occupancy
          </h5>
        </div>
      </a>
    </li>
  </ul>
  <!--Menu Part 02-->

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <div id="base">
        <div class="base-block">
          <h4>Today’s revenue
          </h4>
          <h1>$ 2,300</h1>
          <h5>5 Rooms sold
          </h5>
        </div>
        <div class="base-block">
          <h4>Todate/Month
          </h4>
          <h1>$ 41,000
          </h1>
          <h5>230 Rooms sold
          </h5>
        </div>

      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <div id="base2">
        <div class="base-block">
          <h4>Tentative bookings

          </h4>
          <h1>$ 4,500
          </h1>
          <h5>12 Bookings

          </h5>
        </div>
        <div class="base-block">
          <h4>Confirmed Bookings

          </h4>
          <h1>$ 43,000

          </h1>
          <h5>300 Bookings

          </h5>
        </div>

      </div>

    </div>
  </div>
</div>

＆＃13;

从底部和右侧移除框阴影

1 个答案: