欢迎您! | 积分 | 主页 |
注册 | 登陆 |
官方QQ群: 8807551

CSS 生成跨浏览器阴影效果

发布日期:2010-03-12 22:19:00.0 发布讲师:don 浏览量:129
课程类别:IT电脑开发
学习标签: css 跨浏览器 阴影 效果
免费在线正则表达式验证工具！ 免费在线HTML/JS/CSS调试工具！


点击放大图片-CSS 生成跨浏览器阴影效果
阴影效果是web开发中一个头疼的问题，我做过各种各样的阴影效果，大部分都是用图片生成的，很难定位。现在找到了一种简单的用CSS生成阴影的方法，大家看看下面的例子：
Html代码 
  1. <style type="text/css">  
  2.                   
  3.             div.shadows {  
  4.                 margin: 3em auto;  
  5.                 width: 25em;  
  6.                 font-size: 1.2em;  
  7.                 padding: 1em;  
  8.                 background: #fff;  
  9.                 border: 1px solid #ccc;  
  10.             }  
  11.               
  12.             div.shadows p {  
  13.                 margin: 0;  
  14.                 font: 100% Helvetica, Arial, sans-serif;  
  15.             }  
  16.           
  17.             div.shadows {  
  18.                 -moz-box-shadow: 2px 2px 10px #000;  
  19.                 -webkit-box-shadow: 2px 2px 10px #000;  
  20.             }  
  21.           
  22.         </style>    
  23.           
  24.           
  25.         <!--[if IE]>  
  26.             <style type="text/css">  
  27.                 div.shadows {  
  28.                     -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)   
  29. progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)";  
  30.                     filter: progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)   
  31. progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6);  
  32.                 }  
  33.             </style>  
  34.         < ![endif]-->  
  35.   
  36.   
  37.   
  38.   
  39.         <div class="shadows">  
  40.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>  
  41.         </div>  
  42. 通过几个CSS语句的使用，轻松就实现了阴影效果。 
    最最重要的是，支持所有的主流浏览器，尤其是IE6，这个可就真的太难得了。 


    效果请看这里

 


验证码:验证码

网店名字Don的知识网店
网店店主don
相关课程(共8个):
讲师:don 浏览数:46
2010-07-24 16:06:20.
讲师:don 浏览数:54
2010-07-19 09:37:18.
讲师:don 浏览数:77
2010-06-28 10:43:54.
讲师:don 浏览数:58
2010-06-25 10:14:47.
讲师:don 浏览数:94
2010-06-09 10:14:18.
讲师:don 浏览数:125
2010-05-25 10:54:17.
讲师:don 浏览数:89
2010-05-07 09:31:47.
讲师:don 浏览数:84
2010-04-17 18:03:49.

申请友情链接请联系QQ:181727444友情链接
IT学习网 IT学院站 网页代码站 软件开发网 爱编程 个人网站赚钱 浏览器下载 北极网 从此新闻 博才站长网 淘宝网 装修污染治理 深圳电脑维修 广州计算机维修服务


©2008 - 沪ICP备07037037号 - 简历 - SQL管理 - 邮箱登陆 - RSS阅读