Tạo hình hộp CSS3 trên tất cả các mặt, trừ một mặt

Tôi có một thanh điều hướng theo thẻ nơi tôi muốn tab đang mở có bóng để phân biệt nó với các tab khác. Tôi cũng muốn toàn bộ phần tab có một bóng duy nhất (xem đường ngang dưới cùng) đi lên, che bóng dưới cùng của tất cả các tab ngoại trừ tab đang mở.

Tôi sẽ sử dụng thuộc box-shadowtính của CSS3 để làm điều đó, nhưng tôi không thể tìm ra cách chỉ tô bóng những phần tôi muốn.

Thông thường, tôi sẽ che phần bóng dưới cùng của tab đang mở bằng vùng nội dung (cao hơn z-index), nhưng trong trường hợp này, bản thân vùng nội dung có một vùng bóng để chỉ che phủ tab.

Bố cục tab

     _______ _______ _______
    | | | | | |
____ | _______ | __ | | __ | _______ | ______

Vạch chỉ bóng.

Bóng sẽ đi lên từ các đường ngang và ra ngoài các đường thẳng đứng.

                _______
               | |
_______________ | | _________________

Đây là một ví dụ trực tiếp:

Có bất kỳ sự giúp đỡ nào không, các thiên tài?

Trong mẫu của bạn, hãy tạo một div bên trong #content với kiểu này

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

và thay đổi kiểu #content (loại bỏ đệm) và thêm bóng

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

thêm bóng vào các tab:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

Cắt bỏ nó với tràn.

div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}

<div><div>tab</div></div>

Bạn có thể sử dụng nhiều bóng CSS mà không cần bất kỳ dấu chia nào khác để có được hiệu ứng mong muốn, với lưu ý là không có bóng đổ xung quanh các góc.

div.shadow {
    -webkit-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    -moz-box-shadow:    0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    box-shadow:         0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    height: 25px
}

 <div style="height: 25px"><div class="shadow">tab</div></div>

Nhìn chung, mặc dù nó rất không hay.

Một cách khác, khá sáng tạo, để giải quyết vấn đề này là thêm: after hoặc: before pseudo phần tử vào một trong các phần tử. Trong trường hợp của tôi, nó trông như thế này:

#magik_megamenu>li:hover>a:after {
    height: 5px;
    width: 100%;
    background: white;
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
}

Xem ảnh chụp màn hình, đã làm cho phần tử giả có màu đỏ để hiển thị rõ hơn.

Cá nhân tôi thích giải pháp được tìm thấy ở đây nhất: http://css3pie.com/demos/tabs/

Nó cho phép bạn có trạng thái 0 hoặc trạng thái di chuột với màu nền vẫn có bóng từ nội dung bên dưới phủ lên nó. Không chắc là có thể với phương pháp trên:

CẬP NHẬT:

Thực ra tôi đã sai. Bạn có thể đặt giải pháp được chấp nhận hỗ trợ trạng thái di chuột được hiển thị ở trên. Làm cái này:

Thay vì đặt giá trị tương đối dương trên a, hãy đặt nó vào lớp a.active với chỉ số z cao hơn div #content của bạn bên dưới (có bóng trên đó) nhưng thấp hơn chỉ số z trên content_wrapper.

Ví dụ:

<nav class="ppMod_Header clearfix">
    <h1 class="ppMod_PrimaryNavigation-Logo"><a class="ppStyle_Image_Logo" href="/">My company name</a></h1>
    <ul class="ppList_PrimaryNavigation ppStyle_NoListStyle clearfix">
        <li><a href="/benefits">Benefits</a></li>
        <li><a class="ppStyle_Active" href="/features">Features</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/company">Company</a></li>
    </ul>
</nav>
<div id="ppPage-Body">
    <div id="ppPage-BodyWrap">
        content goes here
    </div>
</div>

sau đó với css của bạn:

#ppPage-Body
    box-shadow: 0 0 12px rgba(0,0,0,.75)
    position: relative /* IMPORTANT PART */

#ppPage-BodyWrap
    background: #F4F4F4
    position: relative /* IMPORTANT PART */
    z-index: 4 /* IMPORTANT PART */


.ppList_PrimaryNavigation li a:hover
    background: #656565
    -webkit-border-radius: 6px 6px 0 0
    -moz-border-radius: 6px 6px 0 0
    border-radius: 6px 6px 0 0

.ppList_PrimaryNavigation li a.ppStyle_Active
    background: #f4f4f4
    color: #222
    -webkit-border-radius: 6px 6px 0 0
    -moz-border-radius: 6px 6px 0 0
    border-radius: 6px 6px 0 0
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.75)
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.75)
    box-shadow: 0 0 12px rgba(0,0,0,0.75)
    position: relative /* IMPORTANT PART */
    z-index: 3 /* IMPORTANT PART */

Cập nhật:

clip-path hiện được hỗ trợ trong tất cả các trình duyệt chính.

Câu trả lời gốc:

Nếu bạn sẵn sàng sử dụng công nghệ thử nghiệm chỉ hỗ trợ một phần , bạn có thể sử dụng clip-pathtài sản .

Điều này sẽ tạo ra hiệu ứng mong muốn: bóng hộp ở trên cùng, bên trái và bên phải với một vết cắt sạch ở cạnh dưới.

Trong trường hợp của bạn, bạn sẽ sử dụng clip-path: inset (px px px px px); nơi các giá trị pixel được tính từ cạnh được đề cập (xem bên dưới).

#container {
    box-shadow: 0 0 8px 2px #888;
    clip-path: inset(-8px -8px 0px -8px);
}

Điều này sẽ cắt div được đề cập tại:

• 8 pixel trên đỉnh (để bao gồm bóng)
• 8 pixel bên ngoài cạnh phải (bao gồm bóng)
• 0 pixel từ dưới cùng (để ẩn bóng)
• 8 pixel bên ngoài cạnh trái (bao gồm bóng)

Lưu ý rằng không cần dấu phẩy giữa các giá trị pixel.

Kích thước của div có thể linh hoạt.

bạn cũng có thể che bóng bằng nhiều bóng hộp.

box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;

Nếu bạn thêm hai nhịp để móc vào thì bạn có thể sử dụng hai nhịp, như sau:

box-shadow: -1px -1px 1px #000;

trên một nhịp và

box-shadow: 1px -1px 1px #000;

trên khác. Có thể làm việc!

Nếu các bóng chồng lên nhau, bạn thậm chí có thể sử dụng 3 bóng - một bóng 1px bên trái, một bóng bên phải 1px và một bóng tối lên 1px, hoặc độ dày tùy ý bạn muốn.

Tôi đã thực hiện một loại hack, không hoàn hảo, nhưng có vẻ ổn:

<ul class="tabs">
<li class="tab active"> Tab 1 </li>
<li class="tab"> Tab 2 </li>
<li class="tab"> Tab 3 </li>
</ul>

<div class="tab-content">Content of tab goes here</div>

SCSS

 .tabs { list-style-type: none; display:flex;align-items: flex-end;
  .tab {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid $vivosBorderGrey2;
    background-color:$vivosBorderGrey2;
    color: $vivosWhite;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom: 0;
    margin-right: 2px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: 0.2s;
    &.active {
      padding-bottom: 10px;
      background-color: #ffffff;
      border-color: #eee;
      color: $vivosMedGrey;
      border-bottom-color: transparent;
      box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.1);
    }
    &:hover {padding-bottom: 10px;
    }
   } 

.tabContent {
  border: 1px solid #eee;
  padding:10px;
  margin-top: -1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}