有没有办法让阴影只落在底部?我有一个菜单，两个图像彼此相邻。我不想要一个正确的阴影，因为它重叠了正确的图像。我不喜欢使用图像，所以有没有一种方法只把它放在底部，比如:
box-shadow-bottom: 10px #FFF;或类似的吗?
-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
当前回答
如果你的背景是实心的(或者你可以使用CSS重现它)，你可以这样使用线性渐变:
div { 背景-图像:线性梯度(到顶部，rgba(0,0,0,0) 0%， rgba(0,0,0,0.3) 5px， #fff 5px， #fff 100%) ｝ < div > < p > Foobar < / p > < p > < / p >测试 < / div >
这将在元素底部生成5px的渐变，从不透明度30%的黑色到完全透明。元素的其余部分为白色背景。当然，改变线性渐变的最后2个色点，你可以使背景完全透明。
其他回答
我还需要一个阴影，但只是在一个图像下，并设置在稍微左和右。这招对我很管用:
.box-shadow {
-webkit-box-shadow: 5px 35px 30px -25px #888888;
-moz-box-shadow: 5px 35px 30px -25px #888888;
box-shadow: 5px 35px 30px -25px #888888;
}
应用于的元素是一个页面宽的图像(980px x 300px)。
如果它有助于摆弄设置时，他们运行如下:
水平阴影，垂直阴影，模糊距离，扩散(即阴影大小)和颜色。
另一个想法是基于@theengineear的回答，我将使用inset而不是polygon。它更容易，因为它的工作方式与边距或填充相同。我还将依靠CSS变量来轻松定义所有不同的情况。
.shadow { box-shadow: 0 0 8px 5px rgba(200, 0, 0, 0.5); clip-path:inset(var(--t,0) var(--r,0) var(--b,0) var(--l,0)) } .top { --t:-100%; } .right { --r:-100%;} .bottom { --b:-100%; } .left { --l:-100%;} /* layout for example */ .box { display: inline-block; vertical-align: top; background: #338484; color: #fff; width: 4em; height: 2em; margin: 1em; padding: 1em; } <div class="box">none</div> <div class="box shadow top right left bottom">all</div> <div class="box shadow top">top</div> <div class="box shadow right">right</div> <div class="box shadow bottom">bottom</div> <div class="box shadow left">left</div> <div class="box shadow bottom right">bottom right</div> <div class="box shadow bottom top">top bottom</div> <div class="box shadow left top right">top left right</div> <div class="box shadow left right"> left right</div>
如果你的背景是实心的(或者你可以使用CSS重现它)，你可以这样使用线性渐变:
div { 背景-图像:线性梯度(到顶部，rgba(0,0,0,0) 0%， rgba(0,0,0,0.3) 5px， #fff 5px， #fff 100%) ｝ < div > < p > Foobar < / p > < p > < / p >测试 < / div >
这将在元素底部生成5px的渐变，从不透明度30%的黑色到完全透明。元素的其余部分为白色背景。当然，改变线性渐变的最后2个色点，你可以使背景完全透明。
我觉得这就是你想要的?
.shadow { -webkit-box-shadow: 0 0 0 0 4px白色，0 6px 4px黑色; -moz-box-shadow: 0 0 0 0 4px白色，0 6px 4px黑色; Box-shadow: 0 0 0 4px白色，0 6px 4px黑色; ｝ < div class = "影子”> wefwefwef < / div >
你需要知道每个值是什么:
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
若要只在元素的一侧应用阴影效果，请将模糊值设置为正数，并将扩展值设置为相同大小，但带负号。根据你想要阴影在哪一边，设置偏移值如下:
顶部阴影:offset-x: 0和offset-y: -5px 右阴影:偏移-x: 5px和偏移-y: 0 底部阴影:偏移-x: 0和偏移-y: 5px 左阴影:偏移-x: -5px和偏移-y: 0
.box{ margin: 2rem; padding: 1rem; } .shadow-all{ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); } .shadow-top { box-shadow: 0 -5px 3px -3px #00000030; } .shadow-right { box-shadow: 5px 0 3px -3px #00000030; } .shadow-bottom { box-shadow: 0 5px 3px -3px #00000030; } .shadow-left { box-shadow: -5px 0 3px -3px #00000030; } <div class="box shadow-all"> Shadow All </div> <div class ="box shadow-top"> Shadow Top </div> <div class ="box shadow-right"> Shadow Right </div> <div class ="box shadow-bottom"> Shadow Bottom </div> <div class ="box shadow-left"> Shadow left </div>
在这里和这里阅读更多
