打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

PIE解决CSS3中border-radius在IE浏览器中的兼容性

学习笔记马富天 2016-05-07 10:31:29 602 0

【摘要】什么是CSS3 PIE，PIE是Processive Internet Explorer（Precessive英文单词是前进的意思），PIE的大概功能就是使得Internet Explorer 6-8的浏览器可以显示CSS中的几个功能。包括：border-radius、box-shadow、linear-gradient，今天主要介绍border-radius（即边框圆角）

border-radius能够实现带圆角的方框，但是在IE6、7和8中，是无法实现的，而在CSS中添加一段声明：behavior:url("pie.htc")，就可以实现IE浏览器6-8下的边框圆角问题。

请看下面的效果图：

完整代码如下所示：

```
<!DOCTYPE>
```
```
<html>
```
```
	<head>
```

		<title>PIE解决CSS3中border-radius在IE浏览器中的兼容性</title>

```
		<meta charset = "utf-8" />
```
```
		<style type="text/css">					
```
```
			*{
```
```
				margin:0;
```
```
				padding:0;
```
```
				font-size:12px;
```
```
			}
```
```
			div{
```
```
					width:100px;
```
```
					margin:10px auto;
```
```
					line-height:30px;
```
```
					border:1px solid red;
```
```
					color:red;
```
```
					text-align:center;
```
```
					 /* Webkit 支持 */ 
```
```
					-webkit-border-radius:4px;
```
```
					/* Mozilla 支持 */
```
```
					-moz-border-radius:4px;
```

					behavior:url('public/home/style/pie/pie.htc');

```
					border-radius:4px;
```
```
					border-radius: 10px 8px 6px 4px;
```
```
			}
```
```
		</style>		
```
```
	</head>
```
```
	<body>
```

		<div>PIE解决border-radius在IE浏览器中的兼容性</div>

```
	</body>	
```
```
</html>
```

PIE的下载地址：

CSS3 PIE的官方网站：

对您是否有帮助呢？有帮助请点个赞，支持一下，嘿嘿~

最后补充一句，就是IE9对CSS3的支持非常好，当然IE10的支持性更好。

版权归马富天博客所有

本文标题：《PIE解决CSS3中border-radius在IE浏览器中的兼容性》

本文链接地址：http://www.mafutian.net/100.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶4

踩4

上一篇《 CSS样式文字超出部分自动转成省略号》下一篇《 CSS3选择器浏览器的支持简介》

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

但愿每次回忆，对生活都不感到负疚。

打赏银两×

PIE解决CSS3中border-radius在IE浏览器中的兼容性

随机阅读换一批

文章分类

TOP10