?? ??? ?? ??? ??

?? ?? ??? ?? ????? ?? ??? ?? ???? ???? ???. CSS3? ??? ? ?? ??? ???? ???? ? ??? ??? ??? ??? ???? border-radius ??? ???? ???? IE 9, Opera 10.5, Safari 5, Chrome 4 ? Firefox 4

1. ??? ?? ??

CSS3 ?? ????? border-radius("??? ??"? ??) ?? ??? ???? ???. ? ???? ??? ??? ????? ? ??? ?? ?????. em, px, ??? ? ?? ???? CSS ??? ??? ? ????.

?? ?? ??? div ?????(??? ??? 200, ??? ???, ???? 2px ?? #000)

QQ截圖20161014131410.png

css3(border -radius) ??? ??? ?? ??? ??

?? ?? ??? 50px? ?????. ?,

border-radius:50px;

QQ截圖20161014131451.png

css3(border-radius) ??? ?? ?? ??

? ???? ? ?? ???? "?? ??"? "?? ??"? ??? 50px? ?????.

css3(border-radius) ??? ?? ???? ?? ??? ??

QQ截圖20161014131515.png

border-radius? ??? 1~4?? ?? ??? ? ????. . (??? ??? ??? ??? ???.) ?? ???? 4?? ?? ?? ? ?? ????? ?????. ? ?? ?? ???? ?? ??? ??? ??? ? ?? ?? ???? ??? ??? ?? ??? ? ?? ?? ????? ?????. ? ?? ?? ???? ? ?? ?? ?? ??? ???? ? ?? ?? ??? ?? ? ?? ??? ???? ? ?? ?? ??? ??? ????? ?????. 4?? ?? ???? ?? ?, ??? ?, ??? ??, ?? ??(???? ??)? ?????.

border-radius:50px 25px; //表示左上角和右下角使用第一個值，右上角和左下角使用第二個值

QQ截圖20161014131556.png

css3(border-radius) ??? ??? ?? ??? ??

border-radius:25px 10px 50px; //左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值

QQ截圖20161014131649.png

CSS3(border-radius) ??? ?? ???? ?? ??? ??

border-radius:25px 10px 50px 0;//左上角、右上角、右下角、左下角(順時針順序)

QQ截圖20161014131715.png

css3(border-radius) ??? ?? ???? ?? ??? ??

border-radius ???? ??? ? ????. ? ?? ? ??? ?????. ??, ? ?? ? ??? ?? ??? ????, ? ?? ? ??? ?? ??? ?????. ? ?? ? ??? ??? 1~4?? ?? ??? ? ??? ?? ??? ? ?? ? ??? ?????.

border-radius:50px/25px;

CSS3(border-radius) ??? ?? ???? ?? ??? ??

QQ截圖20161014131746.png

border-radius: 100px 25px 80px 5px / 45px 25px 30px 15px;

css3(border-radius) ??? ?? ???? ?? ??? ??

QQ截圖20161014131833.png

2. ??? ??

?? ??? 4?? ??? ???? ? ??? ? ???? ????? ??? ?? ????. ? ???? ???? CSS3? ? ?? ??? ??? ?????:

* border-top-left-radius

* border-top-right-radius

* ???-??-???-??

* ???-??-??-??

? ?? 4?? ?? ? ??? 1~2?? ?? ??? ? ????. ?? 1? ???? ?? ??? ?? ??? ????? ?????. 2?? ?? ??? ?? ? ?? ?? ?? ??? ???? ? ?? ?? ?? ??? ?????.

border-top-left-radius: 50px;

css3(border-radius) ??? ?? ???? ?? ??? ??

QQ截圖20161014131959.png

border-top-left-radius: 50px 100px;//第一個值表示水平半徑，第二個值表示垂直半徑。

css3(border-radius) ??? ?? ???? ?? ??? ??

QQ截圖20161014132035.png

3. ??

css3(???-??) ??? ?? ???? ?? ??? ??

QQ截圖20161014132126.png

?? ??:

width:0;
height:0;
border:100px solid gray;
border-radius:100px;
border-right-color:#fff;

css3(border-radius) ??? ??? ?? ??? ??

QQ截圖20161014132144.png

?? ??

????

???? ??

??? ??

<!doctype html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style type="text/css"> div.circle{ height:100px; width:200px; background: red; border-radius:100px/50px; } </style> </head> <body> <div class="circle"> </div> </body> </html>

?????? ???

????