43

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

例如，我有以下代码：

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

我想要一个仅应用于边框顶部的投影（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);
}

但是，阴影似乎受到填充的影响。无论如何在不调整填充的情况下将阴影单独附加到边框？

4

7 回答 7

74

像这样的东西？

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>

于 2012-03-20T18:40:04.997 回答
19

如果您想将阴影应用到元素 ( inset) 的内部，但只希望它出现在一侧，您可以为“spread”参数（第二个示例中的第 5 个参数）定义一个负值。

要完全删除它，请将其设置为与阴影模糊相同的大小（第二个示例中的第四个参数），但为负值。

还要记住将偏移量添加到 y 位置（第二个示例中的第三个参数），以便以下内容：

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

于 2014-06-10T11:44:26.383 回答
3

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

于 2012-03-20T18:41:00.803 回答
2

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

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

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

http://css3generator.com/

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

于 2013-12-28T19:11:57.907 回答
2

多个盒子阴影为我做了。

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/

于 2014-05-08T17:37:15.787 回答
1 
.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;
}

我喜欢使用类似的东西。

于 2015-05-06T21:48:45.270 回答
0

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

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%)
于 2021-06-16T11:46:23.713 回答