css – 防止box shadow显示在特定的一边

前端之家收集整理的这篇文章主要介绍了css – 防止box shadow显示在特定的一边前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有任何方法来创建一个css框阴影,其中不管模糊值,阴影只出现在所需的一面?

例如,如果我想创建一个div在左侧和右侧的阴影和顶部或底部没有阴影。 div不是绝对定位的,其高度由内容决定。

– 编辑 –

@ricebowl:我感谢你的答案。也许你可以帮助创建一个完整的解决方案,以解决我的回答您的解决方案中指出的问题…我的页面设置如下:

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="clearfooter"></div>
</div>
<div id="footer"></div>

和CSS这样:

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
       position:relative; padding:0px; background-color:#e6e6e6; 
       -moz-Box-shadow: -3px 0px 5px rgba(0,.8),3px 0px 5px rgba(0,.8);}
#header   {height:106px; position:relative;}
#content   {position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer  {height:32px; padding:0px; position:relative; width:960px; margin:0px 
           auto 0px auto;}

解决方法

有一个第四个距离,你可以定义称为扩展偏移,它将阴影移入或移出所有4边。所以如果你设置为负模糊距离,这将向内移动相同的距离,因为模糊向外扩展阴影有效地隐藏它的阴影。当然,这也会将阴影向内移动到你想要它出现的那一边,所以你需要增加偏移量的模糊距离来撤消。即:
Box-shadow: (horizontal + blur) 0px (blur) (-blur) color;

所以在你的例子中:

Box-shadow: -8px 0px 5px -5px rgba(0,8px 0px 5px -5px rgba(0,.8);
原文链接:https://www.f2er.com/css/220945.html

猜你在找的CSS相关文章