border-radius IE8兼容处理的方法_浏览器兼容教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

这是html中元素四个角的圆角的大小,不是一个圆元素的宽高相等,且border-radius等于宽高的一半时这个元素是圆形追问这四个值表示图形四个角的大小吗 分别是什么啊 上 右 下 左吗?追答嗯,在html里面,都是上,右,下,左这么来的本回答被提问者采纳www.zgxue.com防采集请勿采集本网。

根据canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下图所示:

border-radius:10px 为边框设置10个像素的圆角

测试代码:

有两种方法: 第一种:给div1加上样式属性overflow:hidden;第二种:给div2也加上圆角样式 border-radius:5px;你可以选择其中一种方法来解决。

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; margin: 10px; border-radius: 10px; border: 1px solid red; } </style> </head> <body> <div id="header"> </div> </body></html>

看到这个按钮没 4个角全是直的 如果设置 border-radius:5px;4个角的就会出现一点圆弧状

IE8浏览器效果:

border-radius:20px;background:#ff6600;margin:16px 0 0 0;} jd_main { width:40px;height:40px;border-radius:20px;background:#ebebeb;position:relative;top:-1px;left:-1px;}思路二就直接设置jd_box

border-radius在IE8浏览器兼容方案:

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 400px; height: 400px; margin: 10px; border-radius: 10px; border: 1px solid red; /*关键属性设置 需要把路径设置好*/ behavior: url(PIE.htc); } </style> </head> <body> <div id="header"> </div> </body></html>

IE8浏览器下效果:

PIE.HTC下载地址:http://css3pie.com/

PIE可以处理CSS3的一些属性,如:

IE8:兼容性主要是:

(1)不支持css3属性,使用PIE.js实现CSS3效果。

(2)media query

 现在有了 CSS3 的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;三是增加视觉美观性。  既然 border-radius 有这么多好处,我们就从他的语法,属性和属性值等方面来看其如何应用,又是如何制作圆角,还有就是除了制作圆角他还能制作什么?有这么多,那我们就开始吧:基本语法:  border-radius : none | <length>{1,4} [/ <length>{1,4} ]?取值范围:  <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。简单说明:  border-radius 是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:  1、只有一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。  2、有两个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right 等于 bottom-left,并且取第二个值  3、有三个值,其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。  4、有四个值,其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。  前面,我们主要看了 border-radius 的缩写格式,其实 border-radius 和 border 属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴在X轴,具体看下面:1234 border-top-left-radius: <length> <length> //左上角border-top-right-radius: <length> <length> //右上角border-bottom-right-radius:<length> <length> //右下角border-bottom-left-radius:<length> <length> //左下角  这里说一下,各角拆分出来取值方式:<length> <length> 中第一个值是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角。  border-radius 只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式,对于老版的浏览器,border-radius 需要根据不同的浏览器内核添加不同的前缀,比说 Mozilla 内核需要加上“-moz”,而 Webkit 内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器,我们看看 border-radius 在不同内核浏览器下的书32313133353236313431303231363533e78988e69d8331333361303039写格式:  1、Mozilla(Firefox, Flock等浏览器)1234 -moz-border-radius-topleft: //左上角-moz-border-radius-topright: //右上角-moz-border-radius-bottomright: //右下角-moz-border-radius-bottomleft: //左下角  等价于:1 -moz-border-radius: //简写  2、WebKit (Safari, Chrome等浏览器)1234 -webkit-border-top-left-radius: //左上角-webkit-border-top-right-radius: //右上角-webkit-border-bottom-right-radius: //右下角-webkit-border-bottom-left-radius: // 左下角等价于:1 -webkit-border-radius: //简写  3、Opera浏览器:1234 border-top-left-radius: //左上角border-top-right-radius: //右上角border-bottom-right-radius: //右下角border-bottom-left-radius: //左下角等价于:1 border-radius: //简写  4、Trident (IE)  IE9 以下版本不支持 border-radius,而且 IE9 没有私有格式,都是用 border-radius,其写法和 Opera 是一样的,这里就不在重复。  为了不管是新版还是老版的各种内核浏览器都能支持 border-radius 属性,那么我们在具体应用中时需要把我们的 border-radius 格式改成:123 -moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?border-radius: none | <length>{1,4} [/ <length>{1,4} ]?  其拆分开来的格式相应需要加上 -moz 和 -webkit,上面的代码其实就等价于下面的代码:123456789101112 -moz-border-radius-topleft: <length> <length> //左上角-moz-border-radius-topright: <length> <length> //右上角-moz-border-radius-bottomright: <length> <length> //右下角-moz-border-radius-bottomleft: <length> <length> //左下角-webkit-border-top-left-radius: <length> <length> //左上角-webkit-border-top-right-radius: <length> <length> //右上角-webkit-border-bottom-right-radius: <length> <length> //右下角-webkit-border-bottom-left-radius: <length> <length> // 左下角border-top-left-radius: <length> <length> //左上角border-top-right-radius: <length> <length> //右上角border-bottom-right-radius: <length> <length> //右下角border-bottom-left-radius: <length> <length> //左下角  另外需要特别注意的是,border-radius 一定要放置在 -moz-border-radius 和 -webkit-border-radius 后面,(特别声明:本文中所讲实例都只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或者在 border-radius 前面加上相应的内核前缀,在实际应用中最好加上各种版本内核浏览器前缀。)  我们初步来看一个实例,HTML代码:1 <div class="demo"></div>  为了更好的看出效果,我们给这个demo添加一点样式:123456 .demo { width: 150px; height: 80px; border: 2px solid #f36; background: #ccc;}  注:如无特殊声明,本文实例所有基本代码格式如上所示,只在该元素上添加border-radius属性设置。123 .demo { border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;}  这种写法我们前面有提到过,“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循TRBL(上右下左)的顺序原则。为了能让大家更清楚理解,我们把上面代码换成如下:123456 .demo { border-top-left-radius: 10px 20px; border-top-right-radius: 15px 30px; border-bottom-right-radius: 20px 10px; border-bottom-left-radius: 30px 15px;}  不仿看看他们的效果:    三、支持的浏览器:    上面我们介绍了border-radius的基本用法,以及在各大浏览器下的格式等,下面我们通过实例来介绍其具体的用法:  一:border-radius只有一个取值时,四个角具有相同的圆角设置,其效果是一致的:123 .demo { border-radius: 10px;}其等价于:123456 .demo{ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}  效果:    二:border-radius设置两个值,此时top-left等于bottom-right并且他们取第一个值;top-right等于bottom-left并且他们取第二个值,也就是说元素 左上角和右下角相同,右上角和左下角相同123 .demo { border-radius: 10px 20px;}  等价于:123456 .demo { border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 20px;}  效果:    三:border-radius设置三个值,此时top-left取第一个值,top-right等于bottom-left并且他们取第二个值,bottom-right取第三个值:123 .demo { border-radius: 10px 20px 30px;}  等价于:123456 .demo { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 30px;}  效果:    四:border-radius设置四个值,此时top-left取第一个值,top-right取第二个值,bottom-right取第三个值.bottom-left取第四个值:123 .demo { border-radius:10px 20px 30px 40px;}  等价于:123456 .demo { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px;}  效果:    从上面四个实例中我们可以看出border-radius和border取值非常相似,我们border遵循TRBL原则(从上边右边下边左边分别对应1、2,3,4四个值),只不过border-radius换成了左上角(top-left)对就值1,右上角(top-right)对应值2,右下角(bottom-right)对应值3,左下角(bottom-left)对应值4.  上面四个实例都是水平和垂直半径相等情况下border-radius的应用,下面我们来看几个水平和垂直半径值不一样的实例:  一、border-radius: 水平 / 垂直:只设置一个水平和一个垂直半径时,那么水平半径分别指定了元素个四个角的水平半径值,同样垂直半径指定了元素的垂直半径值,此时四个角具有相同的效果,因为他们具有相同的值:123 .demo { border-radius: 10px / 20px;}  等价于: 123456 .demo { border-top-left-radius: 10px 20px; border-top-right-radius: 10px 20px; border-bottom-right-radius: 10px 20px; border-bottom-left-radius: 10px 20px;}   效果:    此时我们每个角不在是四分之一圆了,前面我们也说过,只有水平和垂直半径值相同时,他们才具有四分之一圆特性,这样一来,我们可以改变不同的半径值,制作一些特殊的图形效果,感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。  二、border-radius: 水平1 水平2 / 垂直1 垂直2:设置了两个水平值和两个垂直值,此时我们top-left和bottom-right具有相同的水平和垂直半径,也就是其中的水平1和垂直1;而top-right和bottom-left也具有相同的水平和垂直半径值,也就是水平2和垂直2,我们他拆分出来就是:1234 border-top-left-radius: 水平1 垂直1;border-bottom-right-radius: 水平1 垂直1;border-top-right-radius: 水平2 垂直2;border-bottom-left-radius: 水平2 垂直2;  具体我们来看下面的实例:123 .demo { border-radius: 10px 20px / 20px 10px;}<em id="__mceDel" style="font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5;"> </em>  等价于:123456 .demo { border-top-left-radius: 10px 20px; border-bottom-right-radius: 10px 20px; border-top-right-radius: 20px 10px; border-bottom-left-radius: 20px 10px;}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 使用css的border-radius属性 设置圆弧
  • 一个关于border-radius值设置的问题记录
  • css3 border-radius属性详解
  • 浅析border-radius如何兼容ie
  • ie系列不支持css的圆角border-radius等属性的解决方案
  • 求一个border-radius 可以制作出的各种样式的实例教程
  • border-radius:0 100% 100% 100%; 这是什么意思 一个圆吗
  • CSS中的webkit-border-radius和moz-border-radius是什么意思?
  • css3中的border-radius是什么意思
  • 问下懂代码的朋友们,这段代码中的 border-radius: 10px是什么意思
  • 请教一下关于border-radius样式的问题。 在下新人,上个问题把仅有的20分送掉了,此问题就没分了。
  • border-radius什么意思
  • 手机端写border-radius为什么有毛边
  • css 怎么设置border-radius
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作css浏览器兼容教程border-radiusie8css3 border-radius属性详解浅析border-radius如何兼容ieie系列不支持css的圆角border-radius等属性的解决方案css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css 多浏览器兼容性问题及解决方案css firefox火狐浏览器下的兼容性问题一个不错的html视频播放器兼容主流浏览器让ie6/ie7/ie8支持css3属性的8种方法介绍ie8的css hack \9 使用说明ie6兼容性问题及ie6常见bug详细汇总ie6/ie7/ie8/firefox/chrome/safari的css hack兼容一div+css通用兼容性代码整理完美解决ie兼容模式问题(使ie使用固定的渲染模式)ie8 background背景图片没有显示css hack之\9和\0就可能对hack ie11\ie9\ie8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决css浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius ie8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)针对ie浏览器的兼容问题小结避免不必要的浏览器兼容性问题的5个技巧
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved