CSS3教程:使css3的属性在ie中正常显示

文章简介:纯css3圆角兼容ie6.


pie使css3的属性在ie中正常显示(纯css3圆角兼容ie6)

今天在群里看到gucong说的,写一下笔记。

[成都]gucong(35803719) 15:07:19
PIE给我们带来了CSS3属性在IE中的支持
selectivizr给我们带来了CSS3选择器在IE中的支持

------------------------------------------------------谢了~哈哈
我先看的pie,所以这篇笔记我记载的pie。
若是没有pie的话,仅仅用css3写得圆角效果,在IE中不兼容。加上pie就可以。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pie的使用</title>
<style type="text/css">

body{behavior:url("csshover.htc");}
.test{
color:#fff;
border: 1px solid #696;
padding: 60px 0;
text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url("PIE.htc");

}
.test:hover{
cursor:pointer;
border: 1px solid #696;
padding: 60px 0;
text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #cccccc;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#cccccc), to(#ff0000));
background: -webkit-linear-gradient(#cccccc, #ff0000);
background: -moz-linear-gradient(#cccccc, #ff0000);
background: -ms-linear-gradient(#cccccc, #ff0000);
background: -o-linear-gradient(#cccccc, #ff0000);
background: linear-gradient(#cccccc, #ff0000);
-pie-background: linear-gradient(#cccccc, #ff0000);
behavior: url("PIE.htc");}

</head>

<body>

<div class="test">
碰触变色

</body>
</html>

参考资料 http://css3pie.com/

时间: 2024-08-04 09:47:01

CSS3教程:使css3的属性在ie中正常显示的相关文章

CSS3教程:网页文字阴影属性text

文章简介:文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS3中定义的,在CSS2.1中删除了). 文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS3中定义的,在CSS2.1中删除了). text-

CSS3教程(1):CSS3 Gradient(CSS3渐变)

文章简介:CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿.从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3:

Remote Scripting进阶教程---使 Remote Scripting 在客户页中有效

使 Remote Scripting 在客户页中有效在您能使用 remote scripting 来调用服务器脚本之前,必须将 remote scripting 能力添加到用户的客户页中.使用来自于客户脚本的 remote scripting 所需的例程包含在 Rs.htm 文件中.用户必须将该文件包含到自己的客户页中.另外,用户必须调用一个方法来启动 remote scripting applet.为了使得 remote scripting 有效 创建一个空的 JavaScript 脚本块──

Remote Scripting进阶教程---使 Remote Scripting 在服务器页中有效

除了对客户页进行配置以便于调用远程脚本外,您还必须对自己的服务器页进行配置,以便于对它们进行接收.其做法包括下面这些步骤: 包含 remote scripting 服务器库,并对其进行初始化.编写客户页能调用的函数或者例程.将自己的函数和例程显露为方法.缺省的情况是,客户脚本所调用的某个 ASP 页并不显示在浏览器中──而是简单地在服务器上执行并将结果送到客户端.因此,作为规则,您无需在 ASP 页中包括进任何 HTML 文本,而只需脚本.不过,还是有可能在某个 ASP 页上调用包括 HTML

ss教程:CSS3 Media Queries 详解

说起CSS3的新特征,就不得不提到MediaQueries. 本文比力细致,所以良多隐真顶用不到.所以若是只是想简略领会MediaQueries,保举参考CSS3MediaQueries. CSS2.1界说了Media的部门,包罗类型.组别战法则等.CSS并非为了显示器而创造,而是使用于各类各样的,好比常见的显示器,越来愈多的手持设施,可能略显过期的电视机等等. css教程:CSS3 Media Queries 详解,css3教程,css3教程而MediaQueries的引入,其作用就是答应增添

CSS3 Grid布局:CSS3网格布局让内容优先

文章简介:使用CSS3 Grid布局实现内容优先. 浏览器支持许多CSS3的模块,帮助我们解决我们习惯于使用图片的CSS效果.崛起的移动浏览器和响应式网页设计概念给了我们一个全新的方式来来看待Web设计.然而,当它们来临的时候,我们的布局还没有跟上.我们已经讨论了多年的源顺序.内容也结构和内容与样式的分离.然而,为了得到一定的视觉布局,我们大多数不得不决定源秩序. 目前,W3C在制作一些一趣的规范,虽然这些规范会不断的变化,但他们总是在一个起跑线上变动.在这篇文章中,我将向大家介绍CSS的一个模

很棒的HTML5和CSS3教程

CSS3和HTML 5可以影响你设计网站的方式.CSS3提供了很多的设计上的新技术和高级功能,使创建网站变得更容易.下面的列表是今年最新的CSS3和HTML5的教程. 1. The Apple.com navigation menu created using only CSS3 Apple.com的导航菜单,只使用了CSS3. 2. Free CSS3 button class 跨浏览器的按钮类. 3. DIVs with Rounded Corners in CSS3 CSS和DIV的结合使

50 个最佳 CSS3 教程大放送

本文收集了2011年最热门的50个CSS3教程,读者可根据这些教程轻松实现网页的设计.  1. Original Hover Effects with CSS3  本教程讲述应用CSS3实现风格迥异的鼠标悬停效果. 2. CSS3 Transitions Without Using :hover  本教程讲述应用CSS3实现动态变换效果. 3. How to Create a Beautiful Icon with CSS3  本教程讲述应用CSS3创建文档图标. 4. Creative CSS

CSS3教程收集分享:具有动画过渡效果的CSS教程

文章简介:CSS3教程收集分享:具有动画过渡效果的CSS教程. 今天我们分享出了18个优秀的具有动画过渡效果的CSS3详细教程.CSS3让一切变得更加容易和高效,它改变了很多旧的WEB开发技术,在目前网络高速发展的当下,更好的为网页设计师来做后期的维护提供的便利.随着这一过渡效果的使用,让更多的设计变得高效起来.让网页也变得更具艺术过渡的 气质.下面这18个例子可以让你得到更多的灵感.也会让你的交互创意灵感变得更加有意思起来. 创建一个下拉菜单,使用CSS3转换 (演示 下载) 动画Popove