CSS3中内阴影和外阴影的用法

CSS3中的内阴影和外阴影都是用来设置元素阴影效果的属性。内阴影是指在元素的边框内部添加阴影效果，而外阴影则是指在元素的边框外部添加阴影效果。这两种阴影效果的具体用法和属性如下所示。

一、内阴影的用法

1、box-shadow属性

box-shadow属性可以用来设置元素的内阴影效果，其语法如下所示：

box-shadow: inset x y blur spread color;

其中：

x：X轴偏移量，可以为正数或负数；

y：Y轴偏移量，可以为正数或负数；

blur：模糊半径，可以为0；

spread：阴影的扩展半径，可以为0；

color：阴影颜色。

2、示例代码

下面是一个基本的内阴影效果示例代码：

.box {

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

  width: 200px;

  height: 200px;

}

其中，inset表示设置内阴影，0 0表示阴影的偏移量为0，10px表示阴影的半径为10像素，0表示阴影不扩展，rgba(0, 0, 0, 0.5)表示阴影颜色为半透明黑色。

3、效果预览

下面是上述内阴影效果的预览图：

二、外阴影的用法

1、box-shadow属性

和内阴影一样，box-shadow属性也可以用来设置元素的外阴影效果，其语法如下所示：

box-shadow: x y blur spread color;

其中：

x：X轴偏移量，可以为正数或负数；

y：Y轴偏移量，可以为正数或负数；

blur：模糊半径，可以为0；

spread：阴影的扩展半径，可以为0；

color：阴影颜色。

2、示例代码

下面是一个基本的外阴影效果示例代码：

.box {

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

  width: 200px;

  height: 200px;

}

其中，0 0表示阴影的偏移量为0，10px表示阴影的半径为10像素，0表示阴影不扩展，rgba(0, 0, 0, 0.5)表示阴影颜色为半透明黑色。

3、效果预览

下面是上述外阴影效果的预览图：

总结

内阴影和外阴影都是CSS3中常用的设置元素阴影效果的属性，通过设置不同的偏移量、半径、扩展半径和颜色等参数，可以实现不同的阴影效果。在实际应用中，可以根据需要灵活使用内阴影和外阴影，以达到更好的视觉效果。