多拉A梦的CSS(3) - border radius

圆角是网页制作大杀器之一。
border radius就是大杀器的克星。

基本

新建一htm，并复制以下代码。

<style type="text/css">

.showbox {
width:150px;
height:150px;
margin:100px;
border:1px green solid;
-webkit-border-radius:30px;   /*for Safari*/
-moz-border-radius:30px;   /*for FF*/
}

</style>

<div class="showbox">box 1</div>

以FF观看，效果如下。

box1的四角变成了以30px为半径的圆角。

进一步：为四角分别设置

/*FF*/
-moz-border-radius-topleft : 30px;
-moz-border-radius-topright : 10px;
-moz-border-radius-bottomleft : 20px;
-moz-border-radius-bottomright : 40px;
/*Safari*/
-webkit-border-top-left-radius : 30px;
-webkit-border-top-right-radius : 10px;
-webkit-border-bottom-left-radius : 20px;
-webkit-border-bottom-right-radius : 40px;

效果如下：

设置圆角为椭圆

-webkit-border-radius:30px 60px;   /*for Safari*/
-moz-border-radius:30px 60px;   /*for FF,也可用斜杠隔开，形如“30px/60px”*/


同样也可以对四个角分别设置椭圆。


多拉A梦的border radius

head-light中

-webkit-border-radius:45px;
-moz-border-radius:60px;