阴影只在右边答案

【问题标题】：Shadow only to right阴影只在右边
【发布时间】：2013-07-15 16:47:38
【问题描述】：

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

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

【问题讨论】：

请注意，小提琴仅适用于 chrome..
Box-shadow only on one side 的可能重复项 - 解决方案与您的小提琴非常相似。
@Tanner 我检查了那个问题，但解决方案不是只在一侧显示阴影
解决方案中的这个 jsfiddle 只有一个右阴影：jsfiddle.net/Kyle_Sevenoaks/6UFX7/1

标签： css

【解决方案1】：

试试这个：

Demo.

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 属性（第一）的数量以使技巧起作用。

【讨论】：

【解决方案2】：

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

20px 位置 R/L 0px 位置 T/B 5px 传播（模糊） -2px“大小”

【讨论】：