如何在元素的一侧添加框阴影?

时间:2011-02-25 09:11:45

标签: css css3 shadow box-shadow

我需要在某个block元素上创建一个box-shadow,但仅在(例如)右侧创建。我这样做的方法是将带有box-shadow的内部元素包裹到一个带有padding-rightoverflow:hidden;的外部元素中,这样阴影的另外三个边是不可见的。

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

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

13 个答案:

答案 0 :(得分:525)

是的,您可以使用box-shadow规则的shadow spread属性:

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

那里的第四个属性-2px是阴影扩散,你可以用它来改变阴影的扩散,使阴影看起来只在一侧。

这也使用阴影定位规则10px将其发送到右侧(水平偏移),0px将它保持在元素下(垂直偏移。)

5px是模糊半径:)

Example for you here

答案 1 :(得分:28)

我自制的解决方案,易于编辑:

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

答案 2 :(得分:18)

要在最多两侧获得剪切效果,您可以使用具有背景渐变的伪元素。

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

会在通常构成文档的元素的左侧和右侧添加一个漂亮的阴影效果。

答案 3 :(得分:15)

clip-path现在(2020年)是在元素的特定侧面上实现箱形阴影的最简单方法之一,尤其是当所需的效果是特定边缘的“干净”阴影时(我相信这是OP最初要寻找的),就像这样:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>

...与这样的衰减/缩小/细化阴影相反:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}
<div class="shadow-element"></div>

只需将以下CSS应用于相关元素:

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

位置:

  • Apx设置顶部边缘的阴影可见性
  • Bpx
  • Cpx底部
  • Dpx

对于应隐藏阴影的任何边缘,输入0值;对应显示阴影的任何边缘,输入负值(与框阴影模糊半径-Xpx相同)。

答案 4 :(得分:9)

只需使用:: after或:: before之前的元素来添加阴影。将其设为1px并将其放置在您想要的任何一侧。以下是top的例子。

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>

答案 5 :(得分: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>(在这种情况下,我想要{{1的单边插入阴影来自底部)

2。然后我使用负垂直偏移创建了一个常规id="element",将阴影向上推到一侧。

box-shadow

答案 6 :(得分:2)

这可能是一种简单的方法

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

将此分配给任何div

答案 7 :(得分:2)

以下是我的例子:

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

答案 8 :(得分: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>

答案 9 :(得分: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>

答案 10 :(得分:0)

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

答案 11 :(得分: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示例here

答案 12 :(得分:0)

好的,这是更多的尝试。使用伪元素,并在它们上面使用阴影框的功能。

html:

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

无礼:

.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