CSS3阴影实现方法及技巧全解.pdfVIP

CSS3阴影实现⽅法及技巧全解 ⽹页设计中常常要⽤到阴影的效果，通过阴影可以⽐较容易突出⼀个元素，在没 CSS3的时候，⼀般都⽤图⽚做阴影效果，⽽现在通过使⽤CSS3的text-shadow和box- shadow这两个属性就可以分别设置⽂字和容器的阴影。这是⼀种新特性。不过这种特 性只在⽀持CSS3的浏览器上 效果，⽐如：Firefox3.5 ，Safari 3.1 + ，和⾕歌浏览器 等。 容器设置阴影box-shadow 语法： box-shadow : h-shadow v-shadow blur spread color inset; 以上各属性值的解析： horizontal （⽔平）：指定⽔平偏移阴影。正值 （即：5px ）阴影向右，⽽为负值 （即：- 10px ）将使它偏向左。 vertical （垂直）：指定垂直偏移阴影。正值 （即：5px ）会使阴影在框的底部，⽽负 值 （即：- 10px ）将使它偏向上。 blur 模糊) ：设置的柔化半径。默认值为0 ，这意味着没 模糊。正值增加了模糊，⽽ 负值，实际上缩⼩了阴影。此属性默认为0 。 spread:阴影的尺⼨，该参数为可选参数。0px代表阴影和当前的实体⼀样⼤，⼤于0则 表⽰⼤于实体的尺⼨。 clolor 颜⾊) ：颜⾊值,也就是设置阴影颜⾊。 inset:将外部阴影 outset) 改为内部阴影。该参数为可选参数。 提醒：该属性可以加在任意元素上，如图⽚，Div ，SPAN ，P标签等等都可以。 html head titleW3Cschool() title meta http-equiv=Content-Type content=text html; charset=utf-8 style type=text css #shadow { box-shadow : 10px 10px 5px #888888; width:500px; padding:5px; text-align:center; font-size:20px; background:#21759b; margin:0 auto; color:#ffffff; } style head body div id=shadowW3Cschool() div body html 显⽰效果： 浏览器兼容情况： 为了兼容各主流浏览器并⽀持这些主流浏览器的较低版本，在基于Webkit的Chrome和 Safari等浏览器上使⽤box-shadow属性时，我们需要将属性的名称写成-webkit-box- shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。 .box-shadow{ Firefox4 .0- -moz-box-shadow :h-shadow v-shadow blur spread color inse Safariand Google chrome10.0- -webkit-box-shadow :h-shadow v-shadow blur spread color i Firefox4 .0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow :h-shadow v-shadow blur spread color inset; } 注意：出于⽅便，后⽂的css属性 的地⽅只写了box-shadow属性，没 写-moz-和- webkit-前缀的形式，在使⽤中不要忘记加上。 为了更清楚的了解box-shadow的特征，做⼏个⼩测试，看效果： !DOCTYPE html html head meta content=text html; charset=utf-8 http-equiv=Content-Type titleCSS3属性：box-shadow测试 title script type=text javascript src=js jquery .min.js script script type=text java