在CSS中,为了美化HTML页面的显示效果,我们可以给
标签下定义阴影效果。一般情况下,阴影定义在box-shadow属性中,它是一个非常强大的属性,可以定义多种阴影效果。
div { box-shadow: 10px 10px 5px #888888; }
上述代码中,box-shadow属性定义了四个值。第一个值表示阴影水平方向的偏移量,如果是负数,则阴影会出现在元素左边;第二个值表示阴影垂直方向的偏移量,如果是负数,则阴影会出现在元素上面;第三个值表示阴影的模糊半径,如果值越大,阴影则会越模糊;第四个值表示颜色,可以使用CSS支持的颜色值或者16进制颜色值来定义阴影颜色。
此外,box-shadow属性还支持多个阴影效果。例如,我们可以定义一个元素同时有两个阴影:
div { box-shadow: 10px 10px 5px #888888, -10px -10px 5px #888888; }
上述代码中,我们通过逗号分隔两个阴影定义,元素会同时具有两个阴影效果。通过使用box-shadow属性,我们可以轻松定义出不同类型的阴影效果,让页面效果更加丰富多彩。
上一篇css定义列表怎么设置