`
xiaojin0913
  • 浏览: 3492 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

PIE让IE支持CSS3圆角阴影渐变等效果

阅读更多

最近做网站,想用CSS3,但IE真是个蛋疼的货,对CSS3的支持实在。。。最后有一天在github上发现了PIE,PIE网站上的介绍:

   PIE makes Internet Explorer 6-9 capable of rendering    several of the most useful CSS3 decoration features.

 

目前,PIE支持的CSS3属性主要有:

 

 

 

border-radius
box-shadow
border-image
CSS3 Backgrounds (-pie-background)
Gradients  
 

 

我在网站中主要使用了  border-radius,box-shadow gradients,整体来说,比使用图片方便,特别是渐变背景和圆角,节省 了很多处理图片的时间。就我目前使用的情况来看,这个项目的前景还是不错的,特别是在国内,IE盛行。。

 


PIE使用还是比较简单,以渐变为例:

behavior: url(/assets/PIE.htc); //PIE的文件放在位置
position: relative;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2DABE6), color-stop(100%, #6789C0));
background: -webkit-linear-gradient(#2DABE6, #6789C0);
background: -moz-linear-gradient(#2DABE6, #6789C0);
background: -o-linear-gradient(#2DABE6, #6789C0);
background: -ms-linear-gradient(#2DABE6, #6789C0);
-pie-background: linear-gradient(#2dabe6,#6789c0); //这句不可以少
background: linear-gradient(#2DABE6,#6789C0);  
 

同样,如果要用阴影:
behavior: url("/assets/PIE.htc");
position: relative;
-moz-box-shadow: #adadad 0px 0px 2px;
-webkit-box-shadow: #adadad 0px 0px 2px;
-o-box-shadow: #adadad 0px 0px 2px;
box-shadow: #adadad 0px 0px 2px;  
 

圆角:
behavior: url("/assets/PIE.htc");
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px; 
 

如果三个效果放在一个class中,可以只用一次behavior就可以了

如果使用PIE,请使用最新的beta5,处理了不少BUG。。pie项目地址:

 

0
0
分享到:
评论

相关推荐

    ie8兼容html5 css3圆角阴影渐变placeholder等属性

    总结来说,为了让IE8浏览器能够支持HTML5和CSS3的圆角、阴影、渐变以及placeholder属性,开发者需要借助如CSS3 PIE这样的插件,或者采用Modernizr进行特性检测并引入相应的JavaScript模拟。通过这些方法,可以在一定...

    ie支持css3部分功能

    本文将详细探讨如何使IE支持CSS3的部分功能,包括阴影背景效果、圆角效果和渐变背景效果,并介绍一个名为PIE的工具。 首先,让我们关注阴影效果。CSS3中的box-shadow属性允许开发者为元素添加阴影,提升其立体感。...

    让IE6、IE7、IE8支持CSS3的圆角、阴影样式

    在早期的Internet Explorer浏览器,尤其是IE6、IE7和IE8中,由于它们不完全支持CSS3的新特性,如圆角、阴影等,这给网页设计师带来了不小的困扰。为了解决这个问题,开发者们找到了一种利用VML(Vector Markup ...

    PIE.js使IE6,7,8支持部分常用CSS3渲染

    PIE.js 提供了这样的解决方案,它允许开发人员在旧版IE中使用一些现代CSS3的样式属性,如圆角、阴影、渐变等。 **核心功能与原理** PIE.js 的工作原理是利用VML(Vector Markup Language),这是一种微软为IE5.5和...

    PIE(支持IE6及其他浏览器圆角)

    PIE(CSS3 Pie)是一个JavaScript和CSS的解决方案,专门用于解决这个问题,使IE6及更高版本的IE浏览器能够支持圆角效果。 PIE全称为" Positioned Image Extensions",它利用VML(Vector Markup Language)技术来...

    IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    IE浏览器,尤其是早期版本,对于一些现代CSS3特性支持不足,如圆角、阴影等。本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。 首先,`border-radius`属性是CSS3...

    css3PIE(编译后的可用)

    这个库使得开发者能够在老版本的IE浏览器上实现诸如圆角、阴影、渐变等现代CSS3效果,从而提高网站的视觉体验和跨浏览器一致性。 **主要知识点:** 1. **CSS3兼容性**:CSS3PIE的核心目标是解决Internet Explorer...

    让IE6也识别CSS3-圆角效果应用border-radius

    本篇文章将详细介绍如何通过一些技巧和方法,让IE6也能识别并应用CSS3的圆角效果。 `border-radius`属性是CSS3中的一项重要特性,它允许开发者为元素的边框添加圆角,无需再依赖图像来实现这一效果。在现代浏览器中...

    ie 6 ie7 ie8 支持css3

    PIE( Positioned Image Effects )是由HTC(HTML Component)文件组成的JavaScript库,它可以解析CSS3中的某些边框和背景效果,比如圆角、阴影、渐变等,并在不支持这些特性的IE浏览器上模拟出来。HTC文件是一种...

    前端项目-css3pie.zip

    2. **阴影效果(box-shadow)**: 包括内阴影(inset)和外阴影(outset),CSS3 Pie使开发者能够在IE6-9中创建出阴影效果,增加界面的立体感和深度。 3. **渐变背景(linear-gradient, radial-gradient)**: CSS3 Pie...

    让ie6,7,8支持canvas,css3等主流html5技术

    2. **CSS3**: CSS3引入了许多新的样式和布局特性,如边框圆角、渐变、阴影、多列布局、媒体查询等。由于IE6、7、8对CSS3支持不足,开发者可以使用渐进增强的策略,为支持CSS3的现代浏览器编写样式,同时为旧版IE提供...

    ie6下可以用的css3

    通过使用CSS3 Pie,开发者可以在IE6、IE7和IE8等不完全支持CSS3的浏览器中实现如圆角、阴影、渐变和多边形等效果。 标签“css3”代表了层叠样式表的第三版,这是Web设计领域的一个关键标准,提供了丰富的样式和布局...

    【Css3工具】css3maker+httpcss3pie

    在早期,IE浏览器对CSS3的支持并不完善,httpcss3pie通过VML(Vector Markup Language)来模拟这些效果,使得在旧版IE中也能实现类似现代浏览器的视觉效果。使用httpcss3pie,开发者无需为不同浏览器编写额外的CSS ...

    IE6等各种浏览器兼容圆角

    在某些情况下,可以使用CSS3渐变来模拟圆角效果。这种方法在某些版本的IE中可能有效,但并不是所有情况都适用。 综上所述,实现IE6等旧版浏览器的圆角效果需要采用一些非标准的方法,如VML、CSS Behavior、...

    圆角用资源

    `PIE`全称为 Positioned Image ( PIE ),是一个行为层(Behavior Layer)的样式表扩展,它允许IE6-9浏览器支持一些CSS3的特性,如圆角、阴影、渐变等。`.htc`文件是Microsoft特有的HTML组件(HTC - HTML Component)...

    ie兼容Css3属性

    ”,是一个JavaScript和VBScript混合的解决方案,主要用于解决IE6至IE9浏览器对CSS3边角圆润、阴影、渐变等属性的兼容问题。这个工具的核心是通过HTC(行为内容)文件来实现,它允许开发者通过添加特定的类或者属性...

    IE 6 7 8 支持CSS3

    8. **CSS3 PIE**:CSS3 PIE是一个开源项目,通过JavaScript和VML(Vector Markup Language)让IE6、7、8支持一些CSS3的边角、阴影等效果。 9. **使用HTML5 doctype**:使用HTML5的doctype (`<!DOCTYPE html>`) 可以...

    css+div圆角窗口

    创建圆角窗口时,可能还需要用到其他的CSS3特性,如阴影(`box-shadow`)、渐变(`linear-gradient`或`radial-gradient`)、背景裁剪(`background-clip`)等,以增加视觉效果。 5. **响应式设计**: 在移动优先...

    pie.js以及pie.htc

    需要注意的是,pie.js和pie.htc虽然解决了IE8的边框圆角问题,但它们并不能涵盖所有CSS3特性,对于其他如阴影、渐变等效果,可能还需要寻找其他解决方案。此外,由于pie.js依赖于JavaScript,因此在用户禁用...

Global site tag (gtag.js) - Google Analytics