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

我需要在一些块元素上创建一个box-shadow，但只是(例如)在它的右侧。我的方法是用box-shadow将内部元素包装成带有padding-right和overflow:hidden的外部元素;所以阴影的其他三面是不可见的。

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

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

当前回答

为了获得最多两面的剪裁效果，你可以使用带有背景渐变的伪元素。

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

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

2014-06-14 13:03:48

其他回答

我自制的解决方案很容易编辑:

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

2012-06-21 07:46:55

这个网站帮助了我: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>

2013-11-22 01:44:32

为了获得最多两面的剪裁效果，你可以使用带有背景渐变的伪元素。

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

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

2014-06-14 13:03:48

这可能是一个简单的方法

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

将此分配给任何div

2013-02-16 15:26:28

剪辑路径现在(2020年)是在元素的特定侧面实现盒影的最简单的方法之一，特别是当所需的效果是在特定边缘的“干净切割”阴影时(我相信这是OP最初寻找的)，像这样:

.shadow-element { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 0 0 15px rgba(0,0,0,0.75); 剪切路径:插入(0px -15px 0px 0px); ｝ < div class = " shadow-element " > < / div >

.．.而不是像这样减弱/减少/变薄的阴影:

.shadow-element { 边框:1px实体#333; 宽度:100 px; 身高:100 px; 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(Tpx Rpx Bpx Lpx);

地点:

Tpx设置上边缘的阴影可见性 Rpx正确 Bpx底部 Lpx左

对于应该隐藏阴影的任何边，输入一个0的值，对于应该显示阴影的任何边，输入一个负值(与盒子阴影模糊半径- Xpx相同)。

2020-06-13 23:51:22

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

推荐文章

最新文章

标签