仅在一个方向上使用CSS3的盒子阴影？

Question

53

我有一个带有inset（内嵌）的盒子阴影元素，但我只想在顶部显示阴影。

没有设置仅在顶部显示阴影的方法吗？我必须创建额外的元素来覆盖侧面阴影吗？

- Mark

7个回答

12

box-shadow属性可以通过指定x轴和y轴的偏移量来设置阴影的位置。因此，您需要将x轴偏移量设置为0，而将y轴偏移量设置为负值。

此外，您还需要调整模糊半径和扩张半径，以使阴影在左右两侧不可见。

示例：

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

请查看Mozilla 开发者网络上的说明。

- ChrisJ

不，那样行不通。偏移量是x和y而不是左和右。 - Mark

我并没有说过：x偏移是水平偏移；y偏移是垂直偏移。所以，要在顶部产生阴影，您需要使y偏移<0。 - ChrisJ

@Mark 如果你知道如何使用<spread-radius>，它就能正常工作。 - zzzzBov

显然你是对的，抱歉我没有理解你的回答。我道歉。 - Mark

2

例子：

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

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

只使用第二个参数与您想要的偏移量指定顶部阴影而不包括侧面阴影。

演示可以在此处找到: http://jsfiddle.net/rEdBy/ CSS3 Box shadows的一个非常好的教程 - http://www.css3.info/preview/box-shadow/

- Shabnam K

2

更好的方式是使用背景渐变，以下是从左到右和从上到下的示例。 http://jsfiddle.net/wh3L8/

- methodofaction

1

box-shadow 对我来说看起来更好。 - alexvance

1

这是我的示例，请尝试一下。

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

- Webpixstudio

0

这是我做的一个小技巧。

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

- user1187135

0

或许尝试使用 box-shadow：

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

结合 overflow-x：

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

- Marcos Eusebi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zzzzBov · Accepted Answer

这实际上与@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;

它会在元素顶部产生一个单一的渐变带。