4

我有一条线宽：15px；和2px的高度；
我的问题是，如何仅在右侧和左侧创建阴影？

4

4 回答 4

5

This fiddle has examples showing shadows only on:

  • Top and bottom
  • Left and right
  • Top

With that you should be able to do any kind of shadow.

http://jsfiddle.net/rafaelchiti/5jdHW/

The code:

div {
  margin-top: 20px;
  margin-left: 20px;    
  width: 100px;
  height: 100px;
}

.horizontal {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset, 
              0px -15px 10px -11px rgba(0, 0, 0, .1) inset;  
}

.vertical {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset, 
              0px -15px 10px -11px rgba(0, 0, 0, .1) inset;  
}

.one-side {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset;
}

Hope this help.

于 2012-11-02T19:14:06.163 回答
3

试试这个（基于您在上面的评论中提供的链接）：

box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 1);
-webkit-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 1);

您可以使用CSS3 生成器将其调整为您喜欢的方式

于 2012-05-08T12:09:44.903 回答
1

CSS Box Shadow 添加以下类以应用阴影。检查这个 jsfiddle 示例

.shadow {
  -moz-box-shadow:    3px 3px 10px 1px #000;
  -webkit-box-shadow: 3px 3px 10px 1px #000;
  box-shadow:         3px 3px 10px 1px #000;
}
  1. 阴影的水平偏移量，正数表示阴影在盒子的右边，负数表示阴影在盒子的左边。
  2. 阴影的垂直偏移量，负数表示 box-shadow 将在 box 上方，正数表示阴影将在 box 下方。
  3. 模糊半径（可选），如果设置为 0，阴影会很锐利，数字越大，越模糊。
  4. 散布半径（可选），正值增加阴影的大小，负值减小大小。默认值为 0（阴影与模糊大小相同）。
  5. 颜色十六进制颜色值。
于 2012-05-08T12:41:11.877 回答
1 
        .box {
            height: 150px;
            width: 300px;
            margin: 20px;
            border: 1px solid #ccc;
        }

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

        .all {
            box-shadow: 0 0 5px #333;
        }

在身体里放..

    <div class="box top"></div>
    <div class="box right"></div>
    <div class="box bottom"></div>
    <div class="box left"></div>
    <div class="box all"></div>
于 2014-02-12T10:40:24.153 回答