只有一个方向的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>相同的量下降:

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黑色; //顶部框阴影:插入0 -15px 15px -15px黑色; //底部`编辑:对不起,无法正确格式化,不知道为什么,添加了两个空格.如果管理员能够以正确的方式格式化它会很好. (22认同)

Answer 2

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

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

例:

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