仅将阴影应用于border-top？

Question

如何将阴影应用于特定边框边缘？

例如,我有以下代码:

header nav {
    border-top: 1px solid #202020;
    margin-top: 25px;
    width: 158px;
    padding-top:25px;
}

我想要一个仅应用于border-top的投影(1px 1px 1px #cdcdcd).

实现这一目标的最佳方法是什么？

编辑

这基本上就是我在寻找的东西

div {
    border-top: 1px solid #202020;
    margin-top: 25px;
    margin-left:25px;
    width: 158px;
    padding-top:25px;
    -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.75);
}

但是,阴影似乎受到填充的影响.无论如何都要将阴影单独附加到边框而不调整填充？

Answer 1

像这样的东西？

div {
  border: 1px solid #202020;
  margin-top: 25px;
  margin-left: 25px;
  width: 158px;
  height: 158px;
  padding-top: 25px;
  -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
  box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}

<div></div>

Answer 2

如果您想要将阴影应用于元素的内部(inset)但只希望它出现在一侧,您可以为"spread"参数定义一个负值(第二个示例中的第五个参数).

要完全删除它,请将其设置为与阴影模糊相同的大小(第二个示例中为第4个参数),但为负值.

还记得将偏移量添加到y位置(第二个示例中的第3个参数),以便以下内容:

box-shadow:         inset 0px 4px 3px rgba(50, 50, 50, 0.75);

变为:

box-shadow:         inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);

查看这个更新的小提琴:http://jsfiddle.net/FrEnY/1282/以及更多关于box-shadow参数的信息:http://www.w3schools.com/cssref/css3_pr_box-shadow.asp