只有一个方向的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>向下压缩相同的数量：< / p>

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

它将为您提供横跨元素顶部的单个渐变带。

Answer 2

box-shadow在每个方向上将阴影偏移给定量。因此，您需要x偏移为0，y偏移为负值。

此外，您必须使用模糊半径和展开半径，以便在左侧和右侧看不到阴影。

示例：

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

请参阅Mozilla Developer Network上的说明。

Answer 3

更好的方法是使用背景渐变，这里是左右两边。

http://jsfiddle.net/wh3L8/

Answer 4

示例：

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

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

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

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

关于CSS3 Box阴影的非常好的教程 - http://www.css3.info/preview/box-shadow/

Answer 5

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

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

Answer 6

这是我做的一点点黑客。

<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 7

也许尝试使用box-shadow：

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

with overflow-x：

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

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