css - 阴影只在右边

Question

以下是 jsfiddle，我试图在其中仅将具有模糊效果的阴影投射到右侧，但阴影正在蔓延到每一侧。请让我知道如何修改这个小提琴只为了安装阴影，谢谢，

http://jsfiddle.net/6UFX7/8193/

.myDiv {
     margin: 10px;
     width: 100px;
     height: 100px;
     -webkit-box-shadow: 2px 0px 5px 0px #888 ;
 }

Answer 1

试试这个：

演示。

CSS：

.myDiv
{
  margin: 10px;
    width: 100px;
    height: 100px;
    -webkit-box-shadow: 5px 0px 5px -2px #888 ; /*Chrome*/
    -moz-box-shadow: 5px 0px 5px -2px #888 ; /*Firefox*/
    -o-box-shadow: 5px 0px 5px -2px #888 ;  /*Opera*/
    box-shadow: 5px 0px 5px -2px #888 ;
}

使用shadow-spread属性（第四）使用户认为阴影仅在一侧，是的，还增加horizontal offset属性（第一）的数量以使技巧起作用。

Answer 2

.myDiv
{
  margin: 10px;
  width: 100px;
  height: 100px;
  box-shadow: 20px 0px 5px -2px #888 ;
  -webkit-box-shadow: 20px 0px 5px -2px #888 ;
}

20px position R/L 0px position T/B 5px spread(blur) -2px "size"