最新消息:文章中包含代码时,请遵守代码高亮规范!

圆角、阴影兼容性【原创】

HTML+CSS Cindy 210浏览 0评论

进入前端行业,想必大家都写过盒子圆角和阴影效果吧,给页面添加阴影效果,会让页面有立体感,充满活力与动感。但是在调兼容性的时候就会发现这些效果只能兼容到ie9,不能兼容ie9以下版本,很遗憾。之前在做项目的时候,在网上查找了许多资料,终于找到了一个能兼容到ie7版本的方法,可以将效果完美地展示出来。

以下是实现圆角和阴影效果具体的方法步骤:

首先下载PIE.htc文件,低版本下圆角、阴影效果主要是靠PIE.htc文件渲染出来的,具体代码如下:

正常显示效果

Ie8显示效果

Ie7显示效果

使用PIE.htc注意以下几点:

1、IE浏览器的behavior 属性是相对于HTML文档而言的,与CSS其他的属性不一样,不是相对于CSS文档而言的;

2、使用圆角、阴影效果的盒子需要设置position: relative,不然在ie7中布局会出现问题;

3、设置z-index数值,数值数字最好设大一点,避免盒子被其他盒子覆盖;

4、htc 引入方式:behavior: url(PIE.htc)。

知识拓展:

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow      水平阴影的位置,允许负值,正值向右。
v-shadow      垂直阴影的位置。允许负值,正值向下。
blur               可选。模糊距离。
spread          可选。阴影的尺寸。
color             可选。阴影的颜色。请参阅 CSS 颜色值。
inset              可选。将外部阴影 (outset) 改为内部阴影。

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22091.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Cindy的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!