只有一个方向的css3盒子阴影？

Question

我有一个插入框阴影的元素，但我只想要阴影在上面。

有没有办法只设置顶部的影子？我是否必须诉诸创造额外的元素来覆盖侧面阴影？

Answer 1

这在技术上是相同的答案@ChrisJ，对如何使box-shadow听从你的命令更多的一些细节：

参考_{的*为可选项目}：

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>; 

<spread-radius>需要为负数<blur-radius>（以便其他模糊边不会出现），然后您需要将<offset-y>向下等量：

box-shadow: inset 0 20px 20px -20px #000000; 

它会给你一个横跨元素顶部的单梯度带。

Answer 2

盒子阴影在每个方向上偏移给定量的阴影。所以你需要x-offset为0，y-offset为负值。

此外，您必须使用模糊半径和传播半径，以便阴影在左侧和右侧不可见。

实施例：

box-shadow: #777 0px -10px 5px -2px; 

见关于Mozilla Developer Network描述。

Answer 3

更好的方法是使用背景渐变，这里是并排的。

http://jsfiddle.net/wh3L8/

Answer 4

这是我做的一点小事。

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div> 

1. 创建<div class="one_side_shadow"></div>正确的，我想创建所述一个侧框的阴影的元件的下方（在这个情况下，我想为id="element"单侧插入阴影从底部推出）

2. 然后，我使用负的垂直偏移量将阴影向上推至一侧，从而创建了一个常规盒子阴影。

   box-shadow：0 -8px 20px 2px＃DEDEE3;

Answer 5

实施例：

box-shadow: 0 2px 0px 0px red inset; 

所述第一参数和第二参数指定阴影到x方向和y方向上的偏移量分别。 第三个参数指定模糊距离。 最后，第四个参数指定传播距离。

仅指定具有所需偏移量的第二个参数可以获得没有侧影的顶部阴影。

演示可以在这里找到：对CSS3盒阴影http://jsfiddle.net/rEdBy/

一个很不错的教程 - http://www.css3.info/preview/box-shadow/

Answer 6

也许尝试使用的box-shadow：

box-shadow: h-shadow v-shadow blur spread color inset;

具有溢出-X：

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

使用overflow-x: hidden;和box-shadow: 0px 10px 16px -10px #000;

Answer 7

这是我的例子请再试一次

-webkit-box-shadow: 0 8px 6px -6px black; 
-moz-box-shadow: 0 8px 6px -6px black; 
box-shadow: 0 8px 6px -6px black;