weibin ’s blog

今天在Robert Nyman’s blog看到一个很漂亮的hover效果：鼠标悬停背景变为圆角(firefox、chrome和safari下有效果，IE下无圆角效果)。搜索下，原来是使用了mozilla的私有属性-moz-border-radius和webkit的私有属性-webkit-border-radius实现的。
1、对mozilla来说，是靠-moz-border-radius属性实现的：
关于mozilla的-moz-border-radius的详细介绍在这里：
http://developer.mozilla.org/en/CSS/-moz-border-radius
-webkit-border-radius 是mozilla的私有属性，可以实现元素的圆角效果。
-moz-border-radius: {1,4} | inherit;
其中border-radius为长度值，inherit为继承父元素的属性。可以合并设置，也可以分别设置元素的上左、上右、下右、下左四个角的值，分别用-moz-border-radius-topleft、-moz-border-radius-topright、
-moz-border-radius-bottomright、
-moz-border-radius-bottomleft来设置。

也可以合并起来用-webkit-border-radius:5px 10px 15px 20px;

四个角的弧度和长度值的设置有关，数值越大，则圆角效果越明显。。
2、对chrome、Safari这两个webkit内核的浏览器来说，是用-webkit-border-radius来实现的。
详细参考在这里：>http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266–webkit-border-bottom-left-radius
-webkit-border-radius的使用要比mozilla的-moz-border-radius的使用要复杂一些。
-webkit-border-radius的使用格式是：
-webkit-border-radius：{1,2} | inherit;
其中border-radius值为一个或两个，inherit为继承父元素的属性。-webkit-border-radius也可以分别设置四个值的属性，分别用-webkit-border-top-left-radius、-webkit-border-top-right-radius、-webkit-border-bottom-right-radius、-webkit-border-bottom-left-radius设置元素的上左、上右、下右、下左四个角。
但是-webkit-border-radius的每个角是需要设置两个值的。

两个值中前面的值表示上或者下，后面的值表示左或者右。
当然，也可以设置一个值，一个值相当于上左、上右、下右、下左的值分别相等。
和-moz-border-radius一样，数值越大，圆角效果越明显。

如果用-webkit-border-radius的话是只可以设置两个值的，

表示四个角的圆角效果是一样的。
也可以写为一个值，

表示上左、上右、下右、下左的值分别相等，四个角的圆角效果也是一样。
利用这两个属性设置链接的鼠标悬停效果还是很漂亮的。只是只能在firefox、Safari和Chrome下有效，在IE和Opera是没有效果的。