CSS3圆角圆边 支持IE6-IE8浏览器

来源:http://xiaohu-yin.blog.163.com/blog/static/1476581420148263298881/

感谢分享 很是实用

CSS3圆角圆边样式,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角。

本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE 9支持CSS 3和HTML 5的标准。让IE支持CSS 3的解析方法有很多种,下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角。

在CSS中使用CSS插件文件即可让IE6/IE7/IE8浏览器。

具体CSS代码:

	
.yuan { 
	border: 2px solid #C0C0C0; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px; 
	position:relative; 
	padding:5px; 
	background:#93302e; 
	z-index:2; 
	width:330px; 
	height:200px; 
	behavior: url(iecss3.htc) 
} 

在CSS中使用behavior引入“iecss3.htc”插件文件即可。DIVCSS5提示注意,要让IE6-IE8支持,需要将“behavior: url(iecss3.htc)”引人CSS代码直接放到HTML文件源代码内才能生效。

iecss3.htc下载:http://d.divcss5.com/divcss5/down/iecss3.zip

iecss3.htc下载:https://github.com/lojjic/PIE/downloads

让IE6-IE8支持CSS3圆角必备条件: 1、behavior: url(iecss3.htc)必须直接HTML中引人; 2、position:relative; z-index:2; 必须同时使用position和z-index两个CSS属性。

html应用代码:

<div class="yuan"> 
DIVCSS5圆角实例<br> 
CSS3版本圆角实例,<br> 
支持低版本IE6-IE9浏览器 
</div> 

圆角效果截图


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值