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

Posted 2023-02-22

【中文标题】如何在元素的一侧添加框阴影？

【英文标题】：How can I add a box-shadow on one side of an element?

【发布时间】：2011-07-04 04:18:06

【问题描述】：

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

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

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

【问题讨论】：

考虑到 css 在 box-shadows 方面的有限工具，我认为您的方法已经相当不错了。它并不太混乱，并且在语义方面的影响相当小：只有一个无意义的 div。

这是一个不错的 css 侧影：***.com/a/20596554/1491212

这是最好的答案！ \o/ ***.com/a/62366856/358532 谢谢！

【参考方案1】：

是的，你可以使用 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 的第四个属性是shadow spread，你可以用它来改变阴影的传播，让它看起来阴影只在一侧。

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

5px 是模糊半径:)

Example for you here.

【讨论】：

感谢您指出我不知道的事情，但我的意图是仅创建阴影的垂直部分。与 background:url(shadow.png) 100% 0% repeat-y 完全一样。

@Tillda 您应该将此标记为答案，以便其他人搜索解决方案时显示在顶部。我几乎摒弃了这种阅读 cmets 样式的方法并接受了答案。

如果您不希望阴影在角落处减弱，这将非常有用。我自己也想出了这个解决方案，但在大多数情况下（对于一侧的阴影），让阴影小于元素是错误的，从而打破了所述元素是“凸起”或“3D”。

@Mr.Alien 谢谢，我刚刚删除了前缀，因为box-shadow 规则已标准化。

但是这个阴影没有模糊，包括模糊使它从其他部分出来。如果你通过减少点差来解决这个问题，它会在你真正想要的那一侧过早地结束。呜呜呜

【参考方案2】：

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）。

【讨论】：

@tillda，挖掘一个十年前的问题-只是想知道我是否正确解释了您的一次性要求（特别是截止阴影效果）-我试图准确地实现这并在此过程中遇到了您的问题。

非常感谢！这是完美的！

我认为这对于不需要支持 IE11 的人来说是最好的答案。谢谢！

完美。这么多未知的 CSS 东西。当您第一次看到它们时，它们几乎是编造出来的。

【参考方案3】：

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

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

【讨论】：

似乎是最直接的一个 - 只是容器 div 让我不开心；）

这是唯一真正的解决方案。接受的答案在阴影的顶部和底部仍然有模糊，只是在不同的位置。

这对我在 Microsoft Edge 或 Internet Explorer 11 中不起作用。根据缩放级别，另一侧仍有一点阴影。不过其他浏览器都很好。

***.com/a/24220224/238753 的答案与此相同，但没有此答案所具有的浏览器兼容性问题

【参考方案4】：

要获得最多两侧的剪裁效果，您可以使用带有背景渐变的伪元素。

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

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

【讨论】：

完美的解决方案，因为它只在元素的一侧添加阴影效果而不会弄乱标记。

相比负点差法，优点是边角不缩水。

@BananaAcid 我为任何需要它的人创建了一个演示：jsfiddle.net/jDyQt/1198

很好，这在 Chrome、Safari、Firefox、IE11 和 Edge 上完美运行，对我没有副作用

【参考方案5】：

只需使用 ::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>

【讨论】：

这个仍然溢出边缘，但可能是某些人想要的

【参考方案6】：

这是我的例子：

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

【参考方案7】：

这是我做的一个小技巧。

<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;`

【参考方案8】：

这里有一个codepen 来演示每一方，或者一个工作的sn-p：

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

这可能是一个简单的方法

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

将此分配给任何 div

【参考方案10】：

该站点帮助了我：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>

【参考方案11】：

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

【参考方案12】：

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

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

【参考方案13】：

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

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