Question

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

Answer 1

这个小提琴的例子仅显示阴影：

顶部和底部
左右
顶

有了它，你应该可以做任何形式的阴影。

代码：

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

希望得到这个帮助。

Answer 2

试试这个（基于link you gave in your comment above）：

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

您可以使用CSS3 Generator

将其调整为您喜欢的方式

Answer 3

CSS Box Shadow 添加以下类以应用阴影。 Check this jsfiddle example

.shadow {
  -moz-box-shadow:    3px 3px 10px 1px #000;
  -webkit-box-shadow: 3px 3px 10px 1px #000;
  box-shadow:         3px 3px 10px 1px #000;
}

阴影的水平偏移，正值表示阴影在框的右侧，负偏移将阴影打开盒子的左边。
阴影的垂直偏移，阴影的意思是盒子阴影将在盒子上方，正片子阴影将在盒子上方将在框下方。
模糊半径（可选），如果设置为0，阴影将变得清晰，数字越高，它就越模糊。
展开半径（可选），正值会增加大小阴影，负值会减小尺寸。默认值为0（阴影与模糊大小相同。）
颜色十六进制颜色值。

Answer 4

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

如何在一条线上只创建左右两侧的阴影？

4 个答案: