只有一个方向的css3框阴影？

我有一个插入框阴影的元素，但是我只需要顶部的阴影。

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

这在技术上与@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;

它会给你一个单一的渐变带在元素的顶部。

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

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

例：

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

请参阅Mozilla开发者networking上的说明。

一个更好的方法是使用背景渐变，这里是左右兼备的。

例：

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

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

仅指定具有所需偏移量的第二个参数将给出没有侧影的顶部阴影。

演示可以在这里find： http : //jsfiddle.net/rEdBy/

一个非常好的教程CSS3框阴影 – http://www.css3.info/preview/box-shadow/

这里是我的例子，请尝试一次

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

这是我做的一点小事。

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

创build一个<div class="one_side_shadow"></div>正好在我想要创build单边盒子阴影的元素下面（在这种情况下，我想要一个单面embedded阴影为id="element"来自底部）
然后，我使用负的垂直偏移量将影子向上推至一侧，从而创build了一个常规的盒子阴影。

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

也许尝试使用box-shadow：

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

与溢出x：

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