仅在一个方向上的 css3 框阴影？答案

【问题标题】：css3 box shadows in one direction only?仅在一个方向上的 css3 框阴影？
【发布时间】：2011-01-21 07:14:00
【问题描述】：

我有一个带有嵌入框阴影的元素，但我只想要顶部的阴影。

有没有办法只设置顶部阴影？我是否必须求助于创建其他元素来覆盖侧阴影？

【问题讨论】：

标签： css

【解决方案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;

它会给你一个横跨元素顶部的渐变带。

【讨论】：

谢谢你的片段，对我帮助很大。只是为了懒惰的人，这里有一个完整的代码行：box-shadow: inset 15px 0 15px -15px black;//left box-shadow: inset -15px 0 15px -15px black;//right box-shadow: inset 0 15px 15px -15px black;//top box-shadow: inset 0 -15px 15px -15px black;//bottom 编辑：抱歉，无法正确格式化，不知道为什么，添加了两个空格。如果管理员可以正确格式化它会很好。
要在底部创建阴影，只需使y偏移-20px
一旦你掌握了规则，你就可以在这里玩造型了：cssmatic.com/box-shadow

【解决方案2】：

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

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

例子：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

例子：

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

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

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

这是我做的一个小技巧。

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

在我想要创建一侧框阴影的元素正下方创建一个<div class="one_side_shadow"></div>（在这种情况下，我想要一个来自底部的id="element" 的一侧嵌入阴影）
然后我使用负垂直偏移创建了一个常规的盒子阴影，将阴影向上推到一侧。

box-shadow: 0 -8px 20px 2px #DEDEE3;

【讨论】：

【解决方案7】：

也许可以尝试使用 box-shadow：

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

带有溢出-x：

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

【讨论】：