สร้าง CSS3 box-shadow ทุกด้านยกเว้นด้านเดียว

ฉันมีแถบนำทางแบบแท็บซึ่งฉันต้องการให้แท็บที่เปิดอยู่มีเงาเพื่อตั้งค่าให้แตกต่างจากแท็บอื่น ๆ ฉันต้องการให้ส่วนแท็บทั้งหมดมีเงาเดียว (ดูเส้นแนวนอนด้านล่าง) ขึ้นไปแรเงาด้านล่างของแท็บทั้งหมดยกเว้นส่วนที่เปิดอยู่

ฉันจะใช้box-shadowคุณสมบัติของ CSS3 แต่ฉันไม่สามารถหาวิธีแรเงาเฉพาะส่วนที่ฉันต้องการได้

โดยปกติฉันจะปกปิดเงาด้านล่างของแท็บที่เปิดด้วยพื้นที่เนื้อหา (สูงกว่าz-index) แต่ในกรณีนี้พื้นที่เนื้อหาจะมีเงาเพื่อที่จะปิดทับแท็บ

เค้าโครงแท็บ

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

เส้นเงา

เงาจะขึ้นจากเส้นแนวนอนและออกไปด้านนอกของเส้นแนวตั้ง

                _______
               | |
_______________ | | _________________

นี่คือตัวอย่างสด:

มีความช่วยเหลืออะไรบ้างอัจฉริยะ?

ในตัวอย่างของคุณให้สร้าง div ภายใน #content ด้วยสไตล์นี้

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

และเปลี่ยน # รูปแบบเนื้อหา (ลบการพายเรือ) และเพิ่มเงา

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

เพิ่มเงาให้กับแท็บ:

#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 */
}

ตัดมันออกด้วยน้ำล้น

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>

คุณสามารถใช้เงา CSS หลายตัวโดยไม่ต้องมี div อื่น ๆ เพื่อให้ได้เอฟเฟกต์ที่ต้องการโดยไม่มีข้อแม้ที่จะไม่มีเงารอบ ๆ มุม

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>

โดยรวมแม้ว่ามันจะไม่เป็นอันตรายมาก

อีกวิธีหนึ่งที่ค่อนข้างสร้างสรรค์ในการแก้ปัญหานี้คือการเพิ่มองค์ประกอบหลังหรือ: ก่อนหลอกให้กับองค์ประกอบใดองค์ประกอบหนึ่ง ในกรณีของฉันดูเหมือนว่า:

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

ดูภาพหน้าจอทำให้องค์ประกอบหลอกเป็นสีแดงเพื่อให้มองเห็นได้ชัดเจนขึ้น

โดยส่วนตัวแล้วฉันชอบโซลูชันที่พบที่นี่มากที่สุด: http://css3pie.com/demos/tabs/

ช่วยให้คุณมีสถานะเป็นศูนย์หรือสถานะโฮเวอร์โดยมีสีพื้นหลังที่ยังคงมีเงาจากเนื้อหาด้านล่างซ้อนทับอยู่ ไม่แน่ใจว่าเป็นไปได้ด้วยวิธีการด้านบน:

UPDATE:

อันที่จริงฉันไม่ถูกต้อง คุณสามารถทำให้โซลูชันที่ยอมรับรองรับสถานะโฮเวอร์ที่แสดงด้านบน ทำเช่นนี้:

แทนที่จะมีค่าสัมพัทธ์บวกบน a ให้วางไว้ในคลาส a.active ที่มีดัชนี z ที่สูงกว่า #content div ด้านล่าง (ซึ่งมีเงาอยู่) แต่ต่ำกว่าดัชนี z ของคุณ content_wrapper

ตัวอย่างเช่น:

<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>

จากนั้นด้วย css ของคุณ:

#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 */

ปรับปรุง:

clip-path ขณะนี้ได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด

คำตอบเดิม:

หากคุณยินดีที่จะใช้เทคโนโลยีทดลองพร้อมการสนับสนุนเพียงบางส่วนคุณสามารถใช้clip-pathคุณสมบัตินี้ได้

สิ่งนี้จะให้เอฟเฟกต์ที่ต้องการ: เงาของกล่องที่ด้านบนด้านซ้ายและด้านขวาโดยมีรอยตัดที่ขอบด้านล่าง

ในกรณีของคุณคุณจะใช้ clip-path: inset (px px px px); โดยที่ค่าพิกเซลคำนวณจากขอบที่เป็นปัญหา (ดูด้านล่าง)

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

สิ่งนี้จะตัด Div ที่เป็นปัญหาที่:

• 8 พิกเซลด้านบน (เพื่อรวมเงา)
• 8 พิกเซลนอกขอบด้านขวา (เพื่อรวมเงา)
• 0 พิกเซลจากด้านล่าง (เพื่อซ่อนเงา)
• 8 พิกเซลนอกขอบด้านซ้าย (เพื่อรวมเงา)

โปรดทราบว่าไม่ต้องใช้เครื่องหมายจุลภาคระหว่างค่าพิกเซล

ขนาดของ div สามารถยืดหยุ่นได้

คุณสามารถปกปิดเงาโดยใช้เงาหลายกล่องได้เช่นกัน

กล่องเงา: 0 10px 0 #fff, 0 0 10px #ccc;

หากคุณเพิ่มสองช่วงเพื่อเชื่อมต่อคุณสามารถใช้สองช่วงเวลาเช่น:

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

ในช่วงเดียวและ

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

ในอีก อาจได้ผล!

หากเงาซ้อนทับกันคุณสามารถใช้เงาได้ 3 เงา - หนึ่ง 1px ไปทางซ้ายหนึ่ง 1px ไปทางขวาและ 1px ขึ้นไปหรือหนาเท่าที่คุณต้องการ

ฉันแฮ็คแบบหนึ่งไม่สมบูรณ์แบบ แต่ก็ดูโอเค:

<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);
}