css实现一个盒子多个不同颜色阴影

可以使用 `box-shadow` 属性来实现盒子多个不同颜色阴影的效果。具体实现方法如下：

.box {
  width: 100px;
  height: 100px;
  box-shadow: 0 0 10px red, 0 0 20px blue, 0 0 30px green;
}

上述代码中，使用了 `box-shadow` 属性来给 `.box` 元素添加了三个不同颜色的阴影，分别为红色、蓝色和绿色。其中，第一个参数表示阴影的水平偏移量，第二个参数表示阴影的垂直偏移量，第三个参数表示阴影的模糊程度，第四个参数表示阴影的颜色。多个阴影之间用逗号隔开即可。

需要注意的是，不同浏览器对 `box-shadow` 属性的支持可能会略有不同，建议在使用时再进行兼容性测试。

相关问题

css同时给一个盒子设置上面内阴影和右边外阴影

可以使用box-shadow属性同时设置多个阴影，具体代码如下：

box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.5), 10px 0 10px -10px rgba(0,0,0,0.5);

其中，inset 0 -10px 10px -10px rgba(0,0,0,0.5)表示上面的内阴影，具体参数含义与上面回答的相同；10px 0 10px -10px rgba(0,0,0,0.5)表示右边的外阴影，其中10px表示水平偏移量为10px，0表示垂直偏移量为0，10px表示模糊半径为10px，-10px表示阴影的长度为10px，rgba(0,0,0,0.5)表示阴影颜色为黑色，透明度为0.5。

css3 实现盒子四周光晕_CSS3给超链接增加阴影和光晕效果

要实现盒子四周光晕效果，可以使用CSS3的box-shadow属性，设置多个不同颜色和大小的阴影，例如：

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
              0 0 40px rgba(255, 255, 255, 0.4),
              0 0 60px rgba(255, 255, 255, 0.3),
              0 0 80px rgba(255, 255, 255, 0.2),
              0 0 100px rgba(255, 255, 255, 0.1);
}

这里设置了5个不同大小和透明度的阴影，分别产生不同程度的光晕效果。

要给超链接增加阴影和光晕效果，可以使用CSS3的text-shadow属性，例如：

a {
  color: #fff;
  text-shadow: 0 0 10px #fff,
               0 0 20px #fff,
               0 0 30px #fff,
               0 0 40px #f00,
               0 0 70px #f00,
               0 0 80px #f00,
               0 0 100px #f00;
}

这里设置了7个不同大小和颜色的阴影，产生了类似光晕的效果。注意要给超链接设置颜色，否则阴影和光晕效果可能会被遮挡。