[分享]css内外阴影的例子

CSS中的内外阴影是Web设计中常用的一种效果，可以让页面元素看起来更加立体化和有层次感。本文将通过示例代码来介绍如何使用CSS制作内外阴影效果。 .box1 { boxshadow: 10px 10...

CSS中的内外阴影是Web设计中常用的一种效果，可以让页面元素看起来更加立体化和有层次感。本文将通过示例代码来介绍如何使用CSS制作内外阴影效果。

 .box1 {
        box-shadow: 10px 10px 10px #999; /* 外阴影 */
    }
    
    .box2 {
        box-shadow: inset 10px 10px 10px #999; /* 内阴影 */
    } 

上面的示例代码展示了两个不同的样式类，它们分别制作了外阴影和内阴影的效果。CSS的box-shadow属性可以用来制作阴影效果，其中参数的具体含义如下：

• 水平偏移量：水平方向上的偏移距离，可以是正数也可以是负数
• 垂直偏移量：垂直方向上的偏移距离，可以是正数也可以是负数
• 模糊距离：阴影的模糊程度，数值越大阴影越模糊，可以为0
• 阴影扩散距离：阴影的扩散程度，数值越大阴影越扩散，可以为0
• 阴影颜色：阴影的颜色，可以采用十六进制、RGB或者颜色名称表示
• inset关键字：用于表示制作内阴影而非外阴影，可选

通过调整参数的数值可以制作出不同样式的内外阴影效果。同时也可以使用多个阴影效果来实现更加细腻的效果，多个阴影之间使用逗号隔开即可。

 .box3 {
        box-shadow: 10px 10px 10px #999, -10px -10px 10px #ccc; /* 多重阴影 */
    } 

如上面代码所示，可以在box-shadow属性中使用逗号隔开多个阴影效果实现多重阴影的效果。其中同样要注意参数的含义和调整。

最后上面的示例展示了通过CSS代码制作内外阴影效果的方法，进行Web设计时可以根据实际需要灵活运用。