css3新特性阴影

CSS3的出现为网页设计带来了极大的革新，不仅提供了更多的排版方式和样式，还增加了很多新特性，比如今天要介绍的——阴影。

在CSS2中，制作阴影效果需要用到图片来实现，这不仅增加了网页的加载时间，而且在不同浏览器上的呈现效果也会有所不同。但是CSS3的阴影特性完全改变了这种情况，使得制作阴影效果变得更加简单。

/* 阴影属性的语法 */box-shadow: h-shadow v-shadow blur spread color inset;
    

这里box-shadow是用来设置阴影效果的属性，其后面的参数分别为：

• h-shadow：阴影水平偏移距离，可以为正负值。
• v-shadow：阴影垂直偏移距离，可以为正负值。
• blur：阴影模糊半径，值越大阴影就越模糊，可以为0。
• spread：阴影扩散半径，正值时阴影扩大，负值时阴影缩小，可以为0。
• color：阴影颜色，可以为CSS颜色值或者rgba值。
• inset：可选值，可以使阴影变成内阴影。

/* 设置一个黑色的外阴影 */box-shadow: 10px 10px 5px #000;
    

上面的代码表示生成一个水平偏移10像素，垂直偏移10像素，模糊半径为5像素，颜色为黑色的外阴影。

/* 设置一个红色的内阴影 */box-shadow: inset 10px 10px 5px #f00;
    

上面的代码表示生成一个水平偏移10像素，垂直偏移10像素，模糊半径为5像素，颜色为红色的内阴影。

除了box-shadow属性外，CSS3还提供了text-shadow属性用来给文本添加阴影效果，其语法与box-shadow类似。

/* 给文本添加一个黑色的阴影 */text-shadow: 2px 2px #000;
    

使用CSS3的阴影效果，不仅可以减少网页的加载时间，而且也可以使网页的样式更加美观。一段简单的CSS代码就可以实现丰富多彩的阴影效果，如此方便实用，真是一件值得使用的好东西。

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