css3之border-radius

本来想着弄个可以运行的程序，省得再复制麻烦。后台总是屏蔽标签，哎....

今天说下css3中border-rudius 这个属性：

网上介绍的文章很多，比我牛X的人比比皆是，我在这就当给自己做个备忘录，如果不幸能给你带了少许帮助，那在下真是荣幸之至。

首先，说下兼容下问题，由于浏览器厂商为了自己的利益，都想弄个自己的私有属性，真是无商不奸，被所有我们做前端的同学们嗤之以鼻。没办法，谁让人家是大牛，咱只是个民工呢，事还得做啊

下面是不同内核浏览器的简写形式：

1、Mozilla(Firefox, Flock等浏览器)

-moz-border-radius: 

2、WebKit (Safari, Chrome等浏览器)

-webkit-border-radius: 

3、Opera浏览器：

border-radius:

4、Trident (IE)

IE<9不支持border-radius;IE9下没有私有格式，都是用border-radius，其写法和Opera是一样的，这里就不在重复。

所以为了让各大浏览器都可以有效果我们不得不多写几行

-moz-border-radius: 
-webkit-border-radius: 
border-radius: 

这里需要注意的是一定要把border-radius:写到最下面。

下面呢为了方便就把前缀去掉了。

语法：

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的。不多说，你懂得...

而且是像border属性一样是可以分开写的：

-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> //左下角

相信正规的四个圆角都知道怎么写，在这呢我就写个不对称的圆角吧

<style>
.div1 a {-moz-border-radius:10px 15px 20px 30px / 20px 30px 10px 15px;-webkit-border-radius:10px 15px 20px 30px / 20px 30px 10px 15px;border-radius:10px 15px 20px 30px / 20px 30px 10px 15px; padding:10px; display:inline-block;background: #ccc;-webkit-transition:all 0.5s ease-in 0s; text-decoration:none; color:#f00;}
.div1 a:hover{border-radius:20px 35px 30px 40px / 10px 20px 20px 25px; color:#00F;}
</style>

<div class="div1"><a href="#">哇！一个大美女</a></div>

效果出来后你可能看到是一坨，这是怎么玩意？

呵呵，如果你慢慢调可能会调出很不错的效果，我就是说明下原理。

当然了效果和border 的宽度也是有关系的，如果感兴趣您可以自己调着玩玩，就简单写到这吧，革命道路还很长，这只是刚迈一小步，努力总会有收获的！