ie也兼容的css3圆角边框代码,记得收藏。

摘要让IE支持CSS 3圆角边框代码的方法有很多种,下面介绍一种很实用的——IE利用VML矢量可标记语言作为画笔绘出圆角。CSS3圆角圆角边框代码,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角。

在css3.0中,又添加了一个新的属性border-radius,使用border-radius这个属性可以实现圆角边框的效果,CSS3实现DIV圆角需使用支持CSS3的浏览器运行。除IE和遨游外,目前有Firefox ,Safari,Chrome,Opera支持该属性,其Safari,Chrome,Opera是支持最好的。

CSS3圆角边框的优点
传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:

* 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。
* 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。
* 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。

border-radius属性

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

css3圆角边框代码实例(IE兼容),附下载

.radius{
width:150px;
height:40px;
background:#d60;
-moz-border-radius:6px; /* Firefox */
-webkit-border-radius:6px; /* Safari 和 Chrome */
border-radius:6px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
behavior:url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类behavior要引入绝对路径 */
position:relative;
z-index:1000
}

css3圆角边框代码实现原理:

让IE支持CSS 3圆角边框代码的方法有很多种,推荐这种方法——IE利用VML矢量可标记语言作为画笔绘出圆角,非常实用。此处的CSS3圆角圆角边框代码,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角。

css3圆角边框代码注意事项:

1、只能同时4角圆角,不能单独设置;
2、div上可以正常使用,input文本框,会出现异常;
3、CSS文件要和页面在同一目录下,否则无效;
5、z-index值一定要比周围元素的要高。

css3圆角边框代码样式参数说明

样式 生效 无效
border-radius 为元素四个角设置圆角属性
元素边框
只设置一个角落的圆角属性
box-shadow 模糊大小参数
偏移值
不支持除了黑色(#000)以外的其他颜色
text-shadow 模糊大小参数
偏移值
颜色值
IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详

目前留言:1   其中:访客:1   博主:0

  1. 可乐

    ie9有问题,圆角

评论加载中...

给我留言

图片 表情