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

Answer 3

简单的答案是，你做不到。 box-shadow仅适用于整个元素。您可以使用不同的方法并在CSS中使用:: before将1像素高的元素插入标题导航并在其上设置box-shadow。

Answer 4

我发现使用这些交互式工具有助于可视化正在发生的事情，以及可能的事情

http://css3gen.com/box-shadow/

http://www.cssmatic.com/box-shadow

http://css3generator.com/

编辑：查看其他工具以尝试其他生成器和组合。有时我必须提醒自己，仅仅因为你可以，并不意味着你应该 - 它容易被带走！

Answer 5

多个盒子阴影为我做了。

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

Answer 6

.item .content{
    width: 94.1%;
    background: #2d2d2d;
    padding: 3%;
    border-top: solid 1px #000;
    position: relative;
}
.item .content:before{
      content: "";
      display: block;
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      height: 1px;
      -webkit-box-shadow: 0px 1px 13px rgba(255,255,255,1);
      -moz-box-shadow: 0px 1px 13px rgba(255,255,255,1);
      box-shadow: 0px 1px 13px rgba(255,255,255,1);
      z-index: 100;
}

我喜欢用它来做它。

Answer 7

我只在盒子顶部添加阴影的解决方案：

body {
  background-color:lightgray;
}
.box {
    box-shadow: rgb(0 0 0 / 50%) 0px -6px 6px -6px;
    padding:10px;
    margin-top:10px;
    background-color:white;
}

<div class="box">Box with top shadow</div>

如果你想要一个底部阴影，就这样做：

box-shadow: 0 6px 6px -6px rgb(0 0 0 / 50%)

仅将阴影应用于border-top？

7 个答案: