CSS3 box-shadow:inset 可以只做一侧或两侧吗？喜欢边界顶部？答案

【问题标题】：Can CSS3 box-shadow:inset do only one or two sides? like border-top?CSS3 box-shadow:inset 可以只做一侧或两侧吗？喜欢边界顶部？
【发布时间】：2011-05-06 21:55:25
【问题描述】：

我想知道 css3 中对侧面特定内阴影的支持。

我知道这在支持的浏览器上效果很好。

div { box-shadow:inset 0px 1px 5px black; }

我只是好奇是否有办法实现类似的目标：

div { box-shadow-top:inset 0px 1px 5px black; }

【问题讨论】：

How to get box-shadow on left & right sides only 的可能副本，其中有更详细的答案和解释。

标签： css

【解决方案1】：

这对我有用：

box-shadow: inset 1px 4px 9px -6px;

示例：http://jsfiddle.net/23Egu/

【讨论】：

迄今为止最优雅的解决方案。
太棒了！我一直在为此苦苦挣扎，但这条单线带来了有史以来最性感的一侧边框。谢谢，伙计！
值得注意的是，您可以将其切换为 box-shadow: inset 1px -4px 9px -6px; 以获得底部阴影。
左侧阴影：box-shadow: inset 4px 1px 9px -6px; 右侧阴影：box-shadow: inset -4px 1px 9px -6px;
hmm 所以我们所做的就是使用大的传播值，然后使用负模糊来否定它。聪明

【解决方案2】：

我认为您并不真正需要 box-shadow-top，因为如果您将 offsetx 设置为 0 并将 offsety 设置为任何正值，则只有剩余的阴影位于顶部。

如果你想在顶部有阴影，在底部有阴影，你可以简单地使用两个 div：

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

如果您想消除侧面的阴影，请使用rgba 而不是hex 颜色并设置更大的offsety：

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

这样你可以给阴影更多的不透明度，所以边保持隐藏，更多的偏移你得到更少的不透明度

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>

【讨论】：

阴影会比你想要的更分散。双方也发生了变化。它绝对不同于box-shadow-top 给出的结果。编辑但我通常也是这样做的 =)
@Rudie，如果你想摆脱侧面的阴影，请使用rgba 而不是hex 颜色并设置更大的offsety: box-shadow: 0 5px 5px rgba(0,0 ,0,.5) 通过这种方式，您可以为阴影提供更多的不透明度，从而使侧面保持隐藏状态，并且偏移量越大，不透明度就越低
仅供参考，而不是让两个嵌套的 div 同时实现顶部和底部阴影，您可以使用一个 div 做到这一点：box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;

【解决方案3】：

在父框上使用:before 和after 元素以及由overflow:hidden 切割的常规阴影，如下例所示：http://dabblet.com/gist/2585782

CSS

/**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;    
}

#element:before , #element:after{
  content: "\0020";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

HTML

<div id="element"></div>

【讨论】：

这是对我有用的技术。在我的例子中，#element 是可滚动的，所以我必须将位置更改为粘着才能工作。

【解决方案4】：

在大多数情况下，您可以使用背景渐变来解决问题：

SCSS（带指南针）示例：

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );

【讨论】：

有时我们需要退后一步，想想我们正在努力完成什么。这就是我们经常使用单边内框阴影所追求的。杰出的。如果可以的话，我会投票两次！
当我第一次看到这条评论时，我认为它看起来很复杂，但它工作得很好。谢谢！！

【解决方案5】：

box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

这很好用:)

这是一个说明它的代码笔： http://codepen.io/poopsplat/pen/cGBLy

【讨论】：

【解决方案6】：

对于相同的阴影，但只在顶部：

box-shadow: inset 0px 6px 5px -5px black;

要在一个方向上产生阴影，您必须用“spread”参数否定“blur”参数，然后用相同的值调整“h-pos”和/或“v-pos”参数。它不适用于相反的边界或三重边界。您必须再添加一个定义。

更多示例：http://codepen.io/GBMan/pen/rVXgqP

【讨论】：

【解决方案7】：

不，不是直接的，但是您可以通过将其放入带有overflow: hidden 的 div 中来裁剪掉您不想要的部分：

http://jsfiddle.net/Vehdg/

【讨论】：

【解决方案8】：

我自己也遇到了这个问题。我找到的解决方案是使用多个盒子阴影（你想要阴影的每一侧都有一个）。这是定义：

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

这是怎么想的：

首先，将点差设为 0（这将禁用所有面的效果）
h 偏移量（如果设置为正值，则会向左侧投射，如果设置为负值，则会在右侧投射）
v-offset（如果您将其设置为正，它将投射在顶部，如果将其设置为负，则在底部

在这里你可以看到我的盒子在三个侧面（左侧、顶部、右侧和底部与背景颜色相同，以创建我想要的效果 - 左侧和右侧一直走）至底部） https://codepen.io/cponofrei/pen/eMMyQX

【讨论】：

【解决方案9】：

您可以通过将 div 设置为 overflow:hidden 并沿边框添加阴影元素来实现单面内阴影。

在分区的上下边框设置内阴影：

HTML

&ltdiv id="innerShadow">
    &ltdiv id="innerShadowTop">
        Content...
    &ltdiv id="innerShadowBottom">
&lt/div>

CSS

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}

【讨论】：

许多人会争辩说，像这样添加额外的标记不是语义，而且是不好的做法。这可以通过使用inset 并使用 box-shadow css 的值来实现。请记住，您可以在同一元素上堆叠 box-shadows。因此，可以使用@Jakobud 在上面的评论中所说的：box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black; 另一种方法，即使用:before 和:after 选择器，这比添加不必要的标记稍微不那么冒犯。但是，如果您可以通过直接选择和设置原始元素的样式来做到这一点，为什么要这样做。

【解决方案10】：

box-shadow 用于所有四个方面。你不能改变它（还没有？）。 box-shadow 定义中的 4 种尺寸分别是 OffsetX、offsetY、Blur 和 Spread。

【讨论】：

Spread 和 Blur 不一样。每个都有单独的值。所以从技术上讲，有 6 个。Inset/Outset、OffsetX、OffsetY、BlurRadius、SpreadRadius 和 Color。正如其他人指出的那样，您可以像这样指定一侧box-shadow: inset 0 8px 6px -6px black;
是的。我已更改答案以反映所有 4 个尺寸。

【解决方案11】：

多个盒子阴影对我有用。

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/

【讨论】：