以下是为每一方演示的代码依赖，或工作片段:

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

这可能是一个简单的方法

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

将此分配给任何div

以下是我的例子:

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

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

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

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

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

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

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

5px是模糊半径:)

举个例子。