css實現圓角
css2.1給元素添加圓角是一件很麻煩的事，老辦法是用背景圖片實現，制作比較麻煩。css3，border-radius的屬性，使圓角屬性得到完美的解決。
語法
border-radius:長度值;
說明：
長度值可以是px、百分比、em等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圓角實現</title> <style type="text/css"> div{ width: 100px; height: 50px; border-radius: 10px; background-color: yellow; } </style> </head> <body> <div></div> </body> </html>
設置border-radius:10px;設置的四個圓角半徑都是10px
border-radius屬性值有四個寫法（同margin、padding相似）
（1）border-radius:一個值;
結果如上圖
（2）border-radius:兩個值;
例如:border-radius:10px 20px;表示左上角、右下角為10px，右上角、左下角為20px；
結果
（3）border-radius:設置三個值;
例如:border-radius:10px 20px 30px;表示左上角、右上角和左下角、左下角的圓角半徑依次是10px、20px、30px
結果
（4）border-radius:設置四個值
例如:border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角和左下角的圓角半徑依次是10px 20px 30px 40px
結果
實現下圖效果：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圓角實現</title> <style type="text/css"> div{ width: 50px; line-height: 50px; border-radius:80% 90% 100% 20%; background-color: black; color: white; text-align: center; font-size: 30px; } </style> </head> <body> <div>6</div> </body> </html>