HTML5＆amp; CSS - 双面盒子阴影

Question

在CSS中，我知道你可以做一个四面的盒子阴影。只是想知道你是否能够选择双方。 （只是左侧和右侧）。我知道已有一个问题，但它没有提供任何有用的信息。

由于

Answer 1

您可以使用多个box-shadows来实现效果

div{
    width:100px;
    height:80px;
    margin:50px;
    background:orange;
    box-shadow:-50px 0px 5px 0px grey,50px 0px 5px 0px grey;
}

<div></div>

Answer 2

不确定你的四面或双面盒子阴影是什么意思。框阴影由颜色，x偏移，y偏移，模糊半径和展开半径组成。

所以盒子阴影：红色2px 2px 0px 0px;只会在元素的两边显示红色阴影。

您也可以使用这样的逗号分隔多个框阴影。

＆＃13;

＆＃13;

div {
  height:100px;
  width:100px;
  margin:100px;
  box-shadow:red 0px 2px 0px, blue 2px 0px 0px, green -2px 0px 0px, yellow 0px -2px 0px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助。

Answer 3

您只需添加此类即可实现您的目标-

.shadow-left-right {
  box-shadow: -5px 0 5px -5px #333, 
              5px 0 5px -5px #333;
}