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

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

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


当前回答

剪辑路径现在(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相同)。

其他回答

是的,你可以使用box-shadow规则的阴影扩展属性:

.myDiv { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 10px 0 5px -2px #888; } < div class = " myDiv " > < / div >

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

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

5px是模糊半径:)

举个例子。

以下是我的例子:

.box { 宽度:400 px; 身高:80 px; background - color: # C9C; text-align:中心; 字体:20px normal Arial, Helvetica, sans-serif; 颜色:# fff; 填充:100px 00 0; -webkit-box-shadow: 0 8px 6px黑色; -moz-box-shadow: 0 8px 6px黑色; Box-shadow: 0 8px 6px -6px黑色; } < div class = "盒子" > < / div >

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

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

这是我做的一个小技巧。

<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: 0 -8px 20px 2px #DEDEE3;`