css3圆角属性border-radius如何用.docxVIP

PAGE \* MERGEFORMAT 1 HYPERLINK /course/web/ Web前端视频教程 /course/web/ PAGE \* MERGEFORMAT 1 css3圆角属性border-radius如何用 ? ? ? 在网页设计与制作中，我们常常用css3来实现相关效果，以减页面大小、方便修改等。在相关效果中，我们常常需要实现边框圆角的效果，以前的做法是直接切图，但现在我们可以通过css3的border-radius属性实现了。 相比以前用切图实现圆角效果，现在通过css3的border-radius特性，不仅可以提高网站性能、减少网站维护工作量而且还可以让我们的网页UI更加美观。 其实，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。 其实css3的border-radius特性和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法： border-top-left-radius: length? length?? //左上角 border-top-right-radius: length? length? //右上角 border-bottom-right-radius:length? length? //右下角 border-bottom-left-radius:length? length?? //左下角 css3的border-radius支持的浏览器有：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，而对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说 Mozilla 内核需要加上 “-moz” ，而 Webkit 内核需要加上 “-webkit” 等。如果要兼容各大内核的老版本浏览器，还需要对order-radius分别进行以下书写： （1）Mozilla(Firefox, Flock等浏览器) -moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 等价于：-moz-border-radius: //简写 （2）WebKit (Safari, Chrome等浏览器) -webkit-border-top-left-radius:? //左上角 -webkit-border-top-right-radius:? //右上角 -webkit-border-bottom-right-radius:? //右下角 -webkit-border-bottom-left-radius:? // 左下角 等价于：-webkit-border-radius: //简写 （3）Opera浏览器 border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 等价于：border-radius: //简写 （4）Trident (IE) IE9 以下版本不支持 border-radius，而且 IE9 没有私有格式，都是用 border-radius，其写法和 Opera 是一样的。 border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bot