预览加载中，请您耐心等待几秒...

css3效果案例.docx

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共29页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

关于元素阴影的用法 Box-shadow:属性包含6个参数值：阴影类型，X轴位移，Y轴位移，阴影大小，阴影扩展和阴影颜色。 效果（一）： 代码如下： <styletype="text/css"> img{ height:300px; -moz-box-shadow:5px5px; -webkit-box-shadow:5px5px; box-shadow:5px5px; } </style> </head> <body> <imgsrc="images/cat1.png"/> </body> 代码解析： 效果（二）： 代码如下： <styletype="text/css"> img{ height:300px; -moz-box-shadow:5px20px10px; -webkit-box-shadow:5px20px10px; box-shadow:5px20px10px; } </style> </head> <body> <imgsrc="images/cat1.png"/> </body> 代码解析： 效果（三）：、 代码如下： <styletype="text/css"> img{ height:300px; -moz-box-shadow:0010px#06c; -webkit-box-shadow:0010px#06c; box-shadow:0010px#06c; } </style> </head> <body> <imgsrc="images/cat1.png"/> </body> 代码解析： 效果（四）： 由------变为------- 代码如下： <styletype="text/css"> img{ height:300px; -moz-box-shadow:0010px10px#06c; -webkit-box-shadow:0010px10px#06c; box-shadow:0010px10px#06c; margin-left:100px; margin-top:100px; } </style> </head> <body> <imgsrc="images/cat1.png"/> </body> 代码解析： 设置多组参数定义多色阴影效果（五）： 代码如下： <styletype="text/css"> img{ height:300px; -moz-box-shadow:-10px012pxred, 10px012pxblue, 0-10px12pxyellow, 010px12pxgreen; -webkit-box-shadow:-10px012pxred, 10px012pxblue, 0-10px12pxyellow, 010px12pxgreen; box-shadow:-10px012pxred, 10px012pxblue, 0-10px12pxyellow, 010px12pxgreen; margin-left:100px; margin-top:100px; } </style> </head> <body> <imgsrc="images/cat1.png"/> </body> 代码解析： 通过多组参数值可以定义渐变阴影效果（六）: 代码如下： <styletype="text/css"> img{ height:300px; -moz-box-shadow:0010pxred, 2px2px10px10pxyellow, 4px4px12px12pxgreen; -webkit-box-shadow:0010pxred, 2px2px10px10pxyellow, 4px4px12px12pxgreen; box-shadow:0010pxred, 2px2px10px10pxyellow, 4px4px12px12pxgreen; margin-left:100px; margin-top:100px; } </style> </head> <body> <imgsrc="images/cat1.png"/> </body> 代码解析： 参数组一层比一层大 背景图片重合效果： 代码如下： <styletype="text/css"> html,body{height:100%;} body{ background:url(images/cat1.png)centerno-repeat, url(images/cat1.png)bott