CSS3 box-shadow：inset可以只做一面还是两面？像边顶一样？

80

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

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

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

我只是想知道是否有一种方法可以实现以下目标： 

div { box-shadow-top:inset 0px 1px 5px black; }
css 
— ndmweb
source
可能的“如何仅在左侧和右侧获得阴影”的副本，其中包含更详细的答案和说明。
— brichins

Answers:

147

这对我有用：

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

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

— 昵称
source
9
迄今为止最优雅的解决方案。
— enyo 2012年
太棒了！我一直在为此苦苦挣扎，但是这条单线带来了有史以来最性感的一侧边框。谢啦！
— Sliq 2012年
12
值得注意的是，您可以将其切换box-shadow: inset 1px -4px 9px -6px;为底部阴影。
— 贾斯汀·罗素
7
左侧阴影：box-shadow: inset 4px 1px 9px -6px; 右侧阴影：box-shadow: inset -4px 1px 9px -6px;
— bryanbraun 2014年
嗯，所以我们要做的就是使用大的扩展值，然后使用负模糊否定它。聪明
— 萨米拉·坎
11

我认为您并不是真正需要的，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>
— 塞勒
source
而且阴影会散布得比您想要的多。双方也发生了变化。其结果肯定与给出的结果不同box-shadow-top。编辑但这也是我通常这样做的方式=）
— 鲁迪（Rudie
@Rudie，如果要消除侧面的阴影，请使用颜色rgba而不是hex颜色，并设置更大offsety：box-shadow：0 5px 5px rgba（0,0,0，.5）这样您可以使阴影更加不透明，从而使侧面保持隐藏偏移量
— 越大，遮盖度
3
仅供参考，您无需使用两个嵌套的div即可同时实现顶部和底部阴影，您可以使用以下方法对一个div进行处理：box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;
— Jake Wilson
10

在上例中，使用: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>
— 雅各布·科索罗阿巴
source
这是对我有用的技术。就我而言，＃element是可滚动的，因此我必须将位置更改为粘滞才能正常工作。
— MihaiRăducanu
5

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

SCSS（带指南针）示例：

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
— 奥马尔·贾拉尔扎达（Omar Jalalzada）
source
1
有时我们需要退后一步，思考我们要完成的工作。这通常是我们想要的带有一侧内盒阴影的东西。辉煌。如果可以的话，我将投票两次！
— random_user_name 2013年
当我第一次看到此评论时，我认为它看起来很复杂，无法正常工作，但效果很好。谢谢！！
— 亚历克斯
4 
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

— plat
source
3

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

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

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

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

— 曼
source
1

我本人只是有这个问题。我发现的解决方案是使用多个框阴影（想要阴影的每一侧各有一个阴影）。这是定义：

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

这是怎么想的：

  • 首先，使传播为0（这将在所有方面禁用效果）
  • h偏移（如果将其设置为正，则将在左侧投射，如果将其设置为负，则将在右侧投射）
  • v偏移（如果将其设置为正，则将在顶部投射；如果将其设置为负，则将在底部投射

在这里，您可以看到我的盒子的三个侧面都带有阴影（左，上，右和下与背景颜色相同，以创建想要的效果）-左和右一直到底部） https://codepen.io/cponofrei/pen/eMMyQX

— 克里斯蒂·奥诺夫雷（Cristi Onofrei）
source
0

您可以通过将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);
}
— 杰森·乔治
source
许多人会认为添加这样的额外标记不是语义上的，而是不好的做法。这可以通过使用inset盒阴影css的值并使其具有创造力来实现。请记住，您可以在同一元素上堆叠盒子阴影。因此，可以使用@Jakobud在上面的评论中说的内容：box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black; 另一种方式是，使用:before和:after选择器，仅比添加不必要的标记少一点令人反感。但是，如果可以直接选择原始元素并设置其样式，那么为什么要这样做。
— ORyan
0

box-shadow适用于所有四个方面。您无法更改（是吗？）。该4种尺寸的box-shadow定义是OffsetX，offsetY，Blur和Spread。

— 鲁迪
source
1
传播和模糊是不一样的。每个都有单独的值。所以，在技术上也有6 Inset/Outset，OffsetX，OffsetY，BlurRadius，SpreadRadius和Color。正如其他人指出的那样，您可以指定这样的一侧box-shadow: inset 0 8px 6px -6px black;
— ORyan
1
真正。我更改了答案以反映所有4种尺寸。
— Rudie 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.