我有一个带有inset(内嵌)的盒子阴影元素,但我只想在顶部显示阴影。
没有设置仅在顶部显示阴影的方法吗?我必须创建额外的元素来覆盖侧面阴影吗?
我有一个带有inset(内嵌)的盒子阴影元素,但我只想在顶部显示阴影。
没有设置仅在顶部显示阴影的方法吗?我必须创建额外的元素来覆盖侧面阴影吗?
这实际上与@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属性可以通过指定x轴和y轴的偏移量来设置阴影的位置。因此,您需要将x轴偏移量设置为0,而将y轴偏移量设置为负值。
此外,您还需要调整模糊半径和扩张半径,以使阴影在左右两侧不可见。
示例:
box-shadow: #777 0px -10px 5px -2px;
请查看Mozilla 开发者网络上的说明。
例子:
box-shadow: 0 2px 0px 0px red inset;
box-shadow
对我来说看起来更好。 - alexvance-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>
在我想要创建单侧盒子阴影的元素下方创建一个 <div class="one_side_shadow"></div>
(在这种情况下,我想要从底部创建一个单侧内嵌阴影,针对的是 id="element"
)
然后,我使用负垂直偏移量创建了一个常规的盒子阴影,将阴影向上推到一侧。
box-shadow: 0 -8px 20px 2px #DEDEE3;
或许尝试使用 box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset;
结合 overflow-x:
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
使用 overflow-x: hidden;
和 box-shadow: 0px 10px 16px -10px #000;
box-shadow: inset 15px 0 15px -15px black;//左边 box-shadow: inset -15px 0 15px -15px black;//右边 box-shadow: inset 0 15px 15px -15px black;//顶部 box-shadow: inset 0 -15px 15px -15px black;//底部
编辑:抱歉,无法正确格式化,不知道为什么,添加了两个空格。如果管理员能够将其格式化正确,那就太好了。 - Dominik