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

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

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


当前回答

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

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

其他回答

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

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

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

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

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 {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

以下是我的例子:

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

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

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

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

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

5px是模糊半径:)

举个例子。