CSS3框阴影在最前，左，右，只有

我想一个CSS3框阴影仅应用于上，右，并与的结果相匹配的半径留下了DIV的以下CSS（减去底部阴影）

#div { 
    -webkit-box-shadow: 0px 0px 10px #000; 
    -moz-box-shadow: 0px 0px 10px #000; 
    box-shadow: 0px 0px 10px #000; 
}

什么是最好的方法来实现这一目标？

谢谢！

UPDATE 该阴影将应用于页面上的导航栏，该栏位于主容器DIV的顶部。我试图完成的工作是将主DIV的盒形阴影继续放置在位于其上方的导航栏上，但没有导航栏上的底部阴影。看看site itself看看我在说什么，比在这里添加所有的HTML和CSS更容易。

更新2 由于我一起工作的DIV是单数，而不是试图把每个导航里的过客，我当选为它更改为以下：

-webkit-box-shadow: 0px -4px 7px #e6e6e6; 
    -moz-box-shadow: 0px -4px 7px #e6e6e6; 
    box-shadow: 0px -4px 7px #e6e6e6;

这使得阴影顶部非常明显，但这是我想要完成的 - 如果有人知道一种方法来保持阴影与容器DIV外观相同，请让我知道。谢谢！

来源

2011-02-05 NightMICU

好的，而不是做一个又一个编辑 - 稍微调整一下，现在距离很近 - '0px -2.6px 7px＃e6e6e6;`。我希望在张贴之前我已经更多地摆弄了定位，但我对CSS3还很陌生。 – NightMICU 2011-02-05 22:00:14

如果你只是用另一个div覆盖底部部分，你会得到一致的阴影效果。

#servicesContainer { 
    /*your css*/ 
    position: relative; 
}

它是固定的！像魔术一样！

来源

2011-02-06 21:49:30 Duopixel

谢谢:)接受的解决方案，因为它在技术上修复了导航下出现在`＃DIV mainContainer`阴影的问题，但它实际上最终产生了另一个问题 - 从'影子＃mainContainer`重叠导航栏。同样的问题，不同的位置大声笑。噢，好吧 – NightMICU 2011-02-07 01:38:18

我没有看到它，可能是因为我在Chrome上查看它。你可以在#servicesContainer的顶部添加一个新的div，给它一个＃2A0808的背景颜色;和适用位置：相对于新的div。它将达到相同的效果而不会重叠阴影。 – Duopixel 2011-02-07 01:47:52

添加一个单独的答案，因为它完全不同。

您可以使用rgba并将alpha通道设置得较低（以获得透明度），以使您的投影更加明显。

尝试是这样的（与.5玩）

-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);

希望这有助于！

来源

2011-02-06 15:16:59 jdhartley

谢谢:)客户使用Firefox，我检查了你的建议，不幸的是它使它更明显。我想我最终结束了（见我的问题的评论）是我将要得到的最接近的结果。但是我会稍微尝试一下你的答案，可能对未来的项目有用。再次感谢:) – NightMICU 2011-02-06 20:12:23

支持box-shadow的浏览器也支持rgba！：P – 2012-05-30 10:18:11

良好的通话，更新 – jdhartley 2012-05-30 18:37:26

使用推广价值...

的box-shadow具有以下值

box-shadow: x y blur spread color;

，所以你可以使用类似..

box-shadow: 0px -10px 10px -10px black;

UPDATE：我加入一个jsfiddle

来源

2012-02-28 21:46:22 Orlando

您可以到箱阴影财产
如

-moz-box-shadow: 0px 10px 12px 0px #000, 
        0px -10px 12px 0px #000; 
-webkit-box-shadow: 0px 10px 12px 0px #000, 
        0px -10px 12px 0px #000; 
box-shadow: 0px 10px 12px 0px #000, 
      0px -10px 12px 0px #000;

它是阴影，以左边给多个值和只有只，你c在它适应您的要求

来源

2012-11-13 13:43:26

这是伟大的，这就隐藏了我的底部阴影（覆盖白色的影子在其上）的box-shadow：0像素加上了8px 0像素-1px #FFFFFF，0像素0像素1rem 0像素RGBA（0，0，0，0.26）; – 2017-02-10 10:13:38

我找到了一种方法来覆盖阴影“：后”，这里是我的代码：

#div:after { 
    content:""; 
    position:absolute; 
    width:5px; 
    background:#fff; 
    height:38px; 
    top:1px; 
    right:-5px; 
}

来源

2013-03-14 08:23:48 yichengliu

下面的代码为我做作出的阴影插图右侧：

-moz-box-shadow: inset -10px 0px 10px -10px #000; 
-webkit-box-shadow: inset -10px 0px 10px -10px #000; 
box-shadow: inset -10px 0px 10px -10px #000;

希望这将有助于!!!!

来源

2013-03-21 07:14:14

我有同样的问题，并正在寻找一个可能的想法来解决这个问题。

我有一些CSS已经到位了我的标签，这是对我工作：

（注特别是padding-bottom: 2px;内#tabs #selected a {那整齐地隐藏了底部box-shadow和我用下面的CSS伟大的工作。）

#tabs { 
    margin-top: 1em; 
    margin-left: 0.5em; 
} 
#tabs li a { 
    padding: 1 1em; 
    position: relative; 
    top: 1px; 
    background: #FFFFFF; 
} 
#tabs #selected { 
    /* For the "selected" tab */ 
    box-shadow: 0 0 3px #666666; 
    background: #FFFFFF; 
} 
#tabs #selected a { 
    position: relative; 
    top: 1px; 
    background: #FFFFFF; 
    padding-bottom: 2px; 
} 
#tabs ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
#tabs li { 
    float: left; 
    border: 1px solid; 
    border-bottom-width: 0; 
    margin: 0 0.5em 0 0; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
}

以为我会把它作为另一个可能的解决方案，让任何人都可以为此做好准备。

来源

2015-03-12 00:17:36 Mikolaj

我知道这是非常古老的，但这些答案都没有帮助我，所以我添加了我的答案。这就像@ yichengliu的回答一样，使用了伪::after元素。

#div { 
    position: relative; 
} 



#div::after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    width: 1px; 
    height: 100%; 
    z-index: -1; 

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
} 

/*or*/ 

.filter.right::after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 1px; 
    height: 100%; 
    background: white; 
    z-index: -1; 

    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); 
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); 
}

Fiddle

如果您决定更改阴影的X（该drop-shadow或box-shadow的第一像素测量），改变宽度将有助于所以它看起来并不像有一个白色的div和shadow之间的差距。

如果您决定更改投影的Y（drop-shadow或box-shadow或box-shadow的第二像素尺寸），更改高度将有助于出于上述相同的原因。

来源

2016-01-17 02:06:53 Jaketr00

#div:before { 
content:""; 
position:absolute; 
width:100%; 
background:#fff; 
height:38px; 
top:1px; 
right:-5px; 
}

来源

2016-10-21 08:01:29

CSS3框阴影在最前，左，右，只有

回答

相关问题