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

Question

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

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

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

Answer 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是阴影扩散,你可以用它来改变阴影的扩散,使阴影看起来只在一侧.

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

5px 是模糊半径:)

你在这里的例子.

Answer 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，为应显示阴影的任何边缘输入负值（与 box-shadow 模糊半径 - 相同Xpx）。

Answer 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

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

将在通常组成文档的元素的左侧和右侧添加一个漂亮的阴影效果.

Answer 5

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

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