html盒子阴影只设置左右,只在容器一边或两边显示盒子阴影

可以使用CSS中的box-shadow属性来实现盒子阴影的设置，如果只想在容器的一边或两边显示盒子阴影，可以使用伪元素来实现。

例如，如果想在容器左侧显示盒子阴影，可以使用如下的CSS代码：

.container {
  position: relative;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px; /* 设置阴影宽度 */
  background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* 设置渐变背景 */
  z-index: 1;
}
.container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px; /* 设置阴影宽度 */
  background: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* 设置渐变背景 */
  z-index: 1;
}
.container div {
  box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 设置盒子阴影 */
  z-index: 2;
}

解释一下上述代码：

- 首先，容器需要设置为相对定位（position: relative），并且设置一个溢出隐藏（overflow: hidden）的属性，以便隐藏伪元素的部分内容。
- 然后，使用::before和::after伪元素来分别在容器的左侧和右侧添加渐变背景，以实现阴影效果。这里使用了linear-gradient()函数来设置渐变背景，其中第一个参数是渐变方向，to right表示水平方向从左到右，to left表示水平方向从右到左；第二个参数是起始颜色，第三个参数是结束颜色，这里使用rgba()函数来设置颜色和透明度。
- 最后，在容器内部添加一个div元素，并设置box-shadow属性来为其添加盒子阴影效果。为了让阴影显示在伪元素的下面，需要给div元素设置一个比伪元素更高的z-index值。

如果想在容器的两侧都显示盒子阴影，可以将::before和::after伪元素的left和right属性都设置为0，然后将宽度分别设置为容器宽度的一半即可。