[分享]css内外阴影同时存在

CSS内外阴影是网页设计中非常常见的特效。通过设置内阴影和外阴影，可以让元素在视觉上更加立体、突出。/ 外阴影 / boxshadow: 5px 5px 10px ccc; / 内阴影 / boxsh...

CSS内外阴影是网页设计中非常常见的特效。通过设置内阴影和外阴影，可以让元素在视觉上更加立体、突出。

/* 外阴影 */
box-shadow: 5px 5px 10px #ccc;

/* 内阴影 */
box-shadow: inset 5px 5px 10px #ccc; 

在CSS中设置内外阴影的方法非常简单。首先，我们需要使用box-shadow属性。这个属性能够让我们设置元素的内外阴影。

在设置外阴影时，我们需要指定阴影的颜色、水平偏移量、垂直偏移量以及模糊半径。比如，下面的代码会使元素产生一个水平偏移量为5像素、垂直偏移量为5像素、模糊半径为10像素的灰色阴影：

box-shadow: 5px 5px 10px #ccc; 

在设置内阴影时，我们需要在水平偏移量、垂直偏移量和模糊半径之前加上inset关键字。比如，下面的代码会使元素产生一个向内偏移5像素、水平偏移量为5像素、垂直偏移量为5像素、模糊半径为10像素的灰色阴影：

box-shadow: inset 5px 5px 10px #ccc; 

需要注意的是，我们可以同时在同一个元素上设置内外阴影。比如，下面的代码会使元素产生一个向内偏移5像素、向外偏移5像素、水平偏移量为5像素、垂直偏移量为5像素、模糊半径为10像素的灰色阴影：

box-shadow: inset 5px 5px 10px #ccc, 5px 5px 10px #ccc; 

上面的代码中，我们使用逗号将两个阴影效果分隔开来，从而实现了同时存在内外阴影的效果。