css 两侧有阴影

在网页设计中，CSS(Cascading Style Sheets)是必不可少的一部分。CSS可以为网页添加各种样式和效果，比如阴影效果。如果想要网页两侧添加阴影效果，可以使用以下CSS代码：

body {
      background: #fff;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      box-shadow: inset 5px 0px 5px -5px #000,              inset -5px 0px 5px -5px #000;
}
    

以上代码中，首先设置了页面的背景色、外边距和内边距以及盒模型的大小基准（box-sizing）。接着使用CSS的阴影效果（box-shadow）为页面两侧添加阴影。

使用box-shadow属性时，首先需要指定阴影的方向和大小。在以上代码中，我们使用inset参数为阴影视觉上添加内置阴影（也就是向内凹进去看起来更“真实”），并通过5px 0px参数将阴影方向设置为垂直方向并且水平方向上没有偏移。5px参数代表版面上各元素距离该元素的距离，也就是设置阴影的大小。如果只设置一个值，则阴影样式为方形，如果设置两个值，则分别表示水平方向和垂直方向的阴影大小。接着，我们使用-5px参数设置阴影偏移量，从而在X轴和Y轴上分别为阴影添加负偏移，避免阴影重叠。最后，我们分别设置了阴影的颜色为黑色（#000）。

以上代码再配合其他CSS样式一起使用，就可以实现网页两侧的阴影效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！