CR的代码文本

all for learning about the world
  订阅 订阅  :: 管理

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

Posted on 2010-05-18 12:17  mumuliang  阅读(282)  评论(0编辑  收藏  举报
圆角是网页制作大杀器之一。
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;