css3 shadow详细

CSS3影子（shadow）是CSS3的一项重要特性，可以为HTML元素增加立体、变幻无穷的视觉效果。在CSS3中，shadow特性分为两部分：box-shadow和text-shadow。

/*box-shadow*//*只有水平和垂直偏移量的box-shadow*/box-shadow: 10px 10px;
    /*带有水平和垂直偏移量、模糊半径、阴影扩展和颜色参数的box-shadow*/box-shadow: 10px 10px 5px 0px #333333;
    /*只有颜色参数的box-shadow*/box-shadow: 0px 0px #333333;
    /*text-shadow*//*只有水平和垂直偏移量的text-shadow*/text-shadow: 5px 5px;
    /*带有水平和垂直偏移量、模糊半径和颜色参数的text-shadow*/text-shadow: 5px 5px 2px #333333;
    /*只有颜色参数的text-shadow*/text-shadow: #333333;
    

其中，box-shadow可以为HTML元素添加立体效果，text-shadow可以为文字添加透视效果。通过设置水平和垂直偏移量、模糊半径、阴影扩展和颜色参数等参数，实现不同的3D效果。

box-shadow和text-shadow的语法非常相似，只是应用效果不同。在代码中，使用pre标签可以有效地展示CSS3的shadow特性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！