Question

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

我知道这在支持的浏览器上运行良好。

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

我只是想知道是否有办法实现以下目标：

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

Answer 1

这对我有用：

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

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

Answer 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>

Answer 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>

Answer 4

在大多数情况下，您可以使用背景渐变进行解决方法：

SCSS（带罗盘）示例：

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

Answer 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);

这很可爱：）

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

Answer 6

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

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

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

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

Answer 7

不，不是直接，但你可以通过overflow: hidden将它放在div中来裁掉你不想要的部分：

http://jsfiddle.net/Vehdg/

Answer 8

我自己就是这个问题。我找到的解决方案是多个盒子阴影（每个侧面一个你想要你的阴影）。这是定义：

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

以下是如何思考：

首先，使展开0（这将禁用所有方面的效果）
h-offset（如果你设置为正数，它将在左侧投射，如果你设置为负数，则在右侧）
v-offset（如果你设置为正数，它会在顶部施放，如果你设置为负数，则在底部

在这里你可以看到我的情况，三面都是盒子阴影（左，上，右，底部和背景颜色相同，以创造我想要的效果 - 左边和右边一直走至底部） https://codepen.io/cponofrei/pen/eMMyQX

Answer 9

box-shadow适用于所有四方。你不能改变它（但是？）。 box-shadow定义中的4个尺寸为OffsetX，offsetY，Blur和Spread。

Answer 10

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

在分区的顶部和底部边框上设置内部阴影：

HTML

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</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);
}

Answer 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/

CSS3 box-shadow：inset只能做一两面吗？像边境顶部？

11 个答案:

完整示例：

CSS

HTML