CSS3pie是什么?


下面我就讲一讲 PIE 的具体用法

CSS3 PIE下载地址:官网 http://css3pie.com/download/ GitHub https://github.com/lojjic/PIE/downloads

然后只需从下载好的压缩包中解压出 pie.htc 文件,放到我们项目的文件夹中。

在css代码中在需要使用css3的地方添加behavior: url(PIE.htc);指定到htc文件的位置就可以了(相对于html文档)。

接下来是代码示例:

包括圆角、阴影和渐变三种效果。

.pie{
	width: 200px; 
	height: 100px;
	line-height: 100px;
	font-size:14px; 
	border: 1px solid #669966; 
	text-align: center;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: #666666 0 2px 3px;
	-moz-box-shadow: #666666 0 2px 3px ;
	box-shadow: #666666 0 2px 3px ;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));   
	background: -webkit-linear-gradient(#EEFF99, #66EE33);   
	background: -moz-linear-gradient(#EEFF99, #66EE33); 
	-pie-background: linear-gradient(#EEFF99, #66EE33); 
	behavior: url(PIE.htc);
	position:relative;
	z-index:10;
}

效果图:

1.png

接下来是一些注意事项:

1、z-index相关问题

IE下这些CSS3效果实现是借助于VML(矢量可标记语言),由VML绘制圆角或是投影效果的容器元素,然后这个容器元素作为目标元素的后兄弟节点插入,如果目标元素position:absolute 或是 position:relative,则这个css3-container元素将会设置与之一样的z-index值,在DOM tree中,同级的元素总是后面的覆盖前面的,所以这样就实现了覆盖,又避免了可能有其他元素正好插入其中。所以,问题来了,如果目前元素的position属性为static,也就是默认属性,则z-index属性是没有用的,无覆盖可言,所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单,设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1)。

2、相当路径的问题

IE浏览器的behavior 属性是相对于HTML文档而言的,与CSS其他的属性不一样,不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方面。如果绝对路径于根目录,则CSS文件不方便移动;如果相对路径与HTML文档,则pie.htc文件在不同HTML页面见的重用性大大降低。同时,诸如border-image后面的URL属性路径也不好处理。

3、缩写的问题

使用PIE实现IE下的CSS3渲染(其他方法也是一样),只能使用缩写的形式,例如圆角效果,高版本的浏览器我们可以设置border-top-left-radius: 1px;表示左上圆角,但是PIE是不支持这种写法的,所以只能用缩写形式border-radius: 1px 1px 1px 1px;。

Image placeholder
前端答疑
未设置
  16人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css sprite是什么?

CSSSprites允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB

css3中过渡和动画的区别是什么?

transition过渡让css变化平滑一些属性:属性描述transtion-property指定过渡的属性transtion-duration指定过渡所需时间transtion-timing-fun

html5 css3是什么?

html5和css3是什么?HTML5和CSS3是HTML和CSS的最新版本。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。CSS则是专门用来控制网页显

css usage是什么工具?

使用cssusage可以查看一个网站中多个页面中的css使用情况——这个很好,可以看到CSS的在网站中的全局使用情况。下载地址:https://addons.mozilla.org/en-US/fir

angular和vue是什么?

Angular是什么?Angular是一个基于TypeScript的开源Web应用程序框架,一个用HTML,CSS和JavaScript/TypeScript构建客户端应用程序的框架。Angular是

react native是什么?

ReactNative使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。ReactNative使

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

app.vue是什么文件?

app.vue是vue页面资源的首加载项,是主组件,页面入口文件,所有页面都是在App.vue下进行切换的;也是整个项目的关键,app.vue负责构建定义及页面组件归集。 exportde

node是什么软件?

Node是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。发布于2009年5月,由RyanDah

react native是什么框架?

ReactNative使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。ReactNative使

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

css3支持哪些浏览器?

CSS3带来众多全新的设计体验,但有一个问题值得考虑:浏览器对CSS3特性的兼容情况如何?因为页面最终离不开用浏览器来渲染,并不是所有浏览器都完全支持CSS3的特性。有时花时间写的效果只能在特定的浏览

css3布局方式有几种

css3布局方式有几种css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。下面我们来看看各种布局的效果吧。一、多栏布局——栅格系统栅格系统就是利用浮动实现的多栏布局,在

css3实现元素不停旋转

css3实现元素不停旋转主要使用了@keyframes和animation,以及指定infinite,播放次数不限来实现。HTML代码如下: HTML中文网 CSS代码如下:(相关课程推荐:css视

css3选择器是啥意思

css3选择器是啥意思要明白css3选择器,我们首先需要知道什么是css选择器。css选择器是什么(推荐学习:CSS视频教程)●css选择器是用来规定css样式用于哪一个或哪一些dom元素的一种规范。

css3有内置图标吗?

css3有内置图标吗?css3没有内置图标,所有的图标都需要用户自己下载后使用。但是我们可以通过设置特殊字符,来实现图标的样式。(推荐学习:CSS视频教程)下面是一个特殊字符来代替图标的案例:

css3怎么实现菱形渐变?

css3怎么实现菱形渐变1、实现菱形渐变,首先需要实现一个菱形,使用了clip-path属性:.diamond{ width:200px; height:200px; clip-path:pol

qq浏览器不支持css3怎么办?

qq浏览器不支持css3怎么办?css3属性,比如keyframe和animation都需要加webkit、ms前缀,针对手机不同浏览器可能还要加更多前缀。以此达到适配所以浏览器的目的。解决qq浏览器

css3有那些内置函数?

css函数属性函数:attr();背景图片函数:linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradie

20200103pm

 20200103 框架 vue的dom-diff是怎么样实现的?https://mp.weixin.qq.com/s/B0... 前言 文章开篇,我们先思考一个问题,大家都说 virtual 

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

Scss与Sass是什么?

之间的区别是什么?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Sass是什么?Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式

sass与scss的区别是什么?

Sass是采用Ruby语言编写的一款CSS预处理语言,它诞生于2007年,是最大的成熟的CSS预处理语言。最初它是为了配合HAML(一种缩进式HTML预编译器)而设计的,因此有着和HTML一样的缩进式

node是做什么的?

node是做什么的?Node对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。Node是一个基于ChromeJav