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

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

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

.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“大小”

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-04-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-11-23
      相关资源
      最近更新 更多