如何在元素的一侧添加盒子阴影？

443

我需要在某些block元素上创建一个盒形阴影，但仅在其右侧上创建（例如）。我做的方式是包装内部元件box-shadow到外层一个padding-right和overflow:hidden;这样的阴影其他三面是不可见的。

有没有更好的方法来实现这一目标？喜欢box-shadow-right吗？

编辑：我的意图是仅创建阴影的垂直部分。repeat-y与规则的作用完全相同background:url(shadow.png) 100% 0% repeat-y。

css  shadow  box-shadow 
— 耕田
source
3
考虑到css在盒子阴影方面的有限工具，我认为您的方法已经相当不错了。它不太混乱，并且在语义方面影响很小：只是一个毫无意义的div。
— 巴兹（Bazzz）2011年
这是一个不错的CSS侧面阴影：stackoverflow.com/a/20596554/1491212
— Armel Larcier 2014年

Answers:

566

是的，您可以使用box-shadow规则的shadow spread属性： 

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>
展开摘要

第四个属性-2px是阴影散布，您可以使用它来更改阴影的散布，使阴影看起来仅在一侧。

这也使用阴影定位规则10px将其发送到右侧（水平偏移），0px并将其保留在元素下（垂直偏移）。

5px 是模糊半径:)

这里给你的例子。

— 凯尔
source
11
感谢您指出我不知道的内容，但我的意图是仅创建阴影的垂直部分。与background：url（shadow.png）100％0％重复-y完全相同。
— 直到
4
@Tillda，您应该将其标记为答案，以便其他寻求解决方案的人看到它。我几乎不赞成使用这种样式的方法来阅读评论并接受答案。
— Devin G Rhode
6
如果您不希望阴影在拐角处衰减，这将非常有用。我本人也想出了这种解决方案，但是在大多数情况下（对于一侧的阴影），使阴影小于元素是错误的，因此打破了这种错觉（如果是故意的话），即该元素是“凸起”或“ 3D”。
— 史蒂文·卢
1
@ Mr.Alien谢谢您，我只是删除了前缀，因为box-shadow规则已经标准化。
— 凯尔
5
但是此阴影没有模糊，并且包括模糊会使它从其他部分出来。而且，如果您通过减少价差来解决这一问题，它会在您真正想要的那一面过早结束。UGHHHHH
— 穆罕默德·乌默尔
37

我自己制作的解决方案，易于编辑：

HTML： 

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

CSS： 

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

演示：http：
//jsfiddle.net/jDyQt/103

— 普约尔
source
1
似乎是最直接的方法-只是容器div以某种方式使我不高兴;）
— BananaAcid 2014年
1
这是唯一真正的解决方案。接受的答案在阴影的顶部和底部仍然模糊，只是在不同的位置。
— 耶勒·布拉乌
在Microsoft Edge或Internet Explorer 11中，这对我不起作用。根据缩放级别的不同，另一端仍然会有一些阴影。其他浏览器虽然很好。
— 山姆
在stackoverflow.com/a/24220224/238753上获得的答案与此相同，但没有该答案具有的浏览器兼容性问题
— Sam
24

要获得最多两个侧面的修剪效果，可以使用具有背景渐变的伪元素。

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

将在通常构成文档的元素的左侧和右侧添加一个类似阴影的效果。

— 贾塞克·库泽姆扎克（Jacek Kuzemczak）
source
完美的解决方案，因为它只会在元素的一侧增加阴影效果，而不会使标记混乱。
— Liquinaut
1
与负扩散法相比，它的优点是不会在拐角处收缩。
— 凯文·克里斯托弗·亨利
3
@BananaAcid我为需要它的任何人创建了一个演示：jsfiddle.net/jDyQt/1198
— zeckdude
尼斯，这个工作完全跨浏览器，Safari浏览器，火狐，IE11和Edge，无副作用，我
— 萨姆
15

只需使用:: after或:: before伪元素添加阴影即可。将其设置为1px，然后将其放置在所需的任何一侧。以下是顶部示例。

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}
<footer>top only box shadow</footer>
展开摘要

— 里格斯恩
source
这个仍然溢出边缘，但可能是某些人想要的
— Sam Sam
5

这是我的示例：

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }
<div class="box">
</div>
展开摘要

— Webpixstudio
source
4

这是我做的一个小技巧。

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1.<div class="one_side_shadow"></div>在要创建单边框阴影的元素下方创建一个右侧（在这种情况下，我希望有一个单边插入阴影id="element"来自底部）

2.然后，我box-shadow使用负的垂直偏移创建了一个正则线，以将阴影向上推到一侧。

`box-shadow: 0 -8px 20px 2px #DEDEE3;`
— atiquratik
source
2

这可能是一个简单的方法

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

将此分配给任何div

— 疯狂的沉默
source
1

这是一个可演示每一面的Codepen或一个有效的代码段：

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}
<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>
展开摘要

— 根
source
0

这个站点对我有帮助：https : //gist.github.com/ocean90/1268328（请注意，截至发布之日，该站点上的左右颠倒了，但是它们按预期运行）。它们在下面的代码中已得到纠正。

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>
— ter24
source
0

我要做的是为阴影创建一个垂直块，并将其放置在应放置块元素的旁边。然后将这两个块包装到另一个块中：

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

jsFiddle示例在这里。

— 吉姆·卡斯特林
source
0

好的，这里再试一次。使用伪元素，并在它们上面使用阴影框的属性。

的HTML：

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

ass

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ

— 亚历克斯
source
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.