除了一个之外，在所有侧面创建CSS3框阴影 [英] Creating a CSS3 box-shadow on all sides but one

问题描述

我有一个标签式导航栏，其中我想打开的选项卡有一个阴影，使其与其他选项卡分开。我也喜欢整个标签部分有一个阴影（见底部水平线）向上，阴影所有选项卡的底部，除了打开一个。

我将使用CSS3的 box-shadow 属性来做，但我不知道一种方式只遮盖我想要的部分。

通常，我会覆盖打开的选项卡的底部阴影与内容区域（高于 z-index ），但在这种情况下，内容区域本身有一个阴影，因此只是卷起来覆盖标签。

制表符布局

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

阴影线。

阴影将从水平线向上，垂直线以外。

 
 _______ 
 | | 
 _______________ | | _________________ 
 
 

这里是一个实例：

任何帮助，天才？

 
 code> #content_over_shadow {
 padding：1em; 
 position：relative; / *看看这个* / 
背景：#fff; / *实心背景（不透明）* / 
} 
  

（删除paddings）并添加阴影

  #content {
 font-size：1.8 em; 
 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; / * shadow * / 
} 
  

I've got a tabbed navigation bar where I'd like the open tab to have a shadow to set it apart from the other tabs. I'd also like the whole tab section to have a single shadow (see bottom horizontal line) going up, shading the bottom of all tabs except for the open one.

I'm going to use CSS3's box-shadow property to do it, but I can't figure out a way to shade only the parts I want.

Normally I'd cover up the bottom shadow of the open tab with the content area (higher z-index), but in this case the content area itself has a shadow so that would just wind up covering the tab.

Tab layout

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

Shadow line.

Shadow would go up from the horizontal lines, and outward of the vertical lines.

                _______
               |       |
_______________|       |_________________

Here is a live example:

Any help out there, geniuses?

解决方案

In your sample create a div inside #content with this style

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

and change #content style (remove paddings) and add shadow

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

add shadows to tabs:

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

这篇关于除了一个之外，在所有侧面创建CSS3框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！