CSS學習——邊框設定圓角
阿新 • • 發佈：2018-12-13
邊框設定圓角
1.快速實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ /*設定寬度和高度 單位px（畫素）*/ width: 100px; height: 100px; /*邊框設定圓角*/ border: 4px solid red; /*設定四個角*/ border-radius: 20px; /*第一個引數設定（上左、下右），第二個引數設定（上右、下右）*/ border-radius: 10px 20px; /*第一個引數上左，第二個引數設定上右、下左，第三個引數設定下右*/ /*border-radius: 10px 20px 30px;*/ /*四個引數分別代表上左、上右、下右、下左*/ border-radius: 10px 20px 30px 40px; } </style> </head> <body> <div class="box"></div> </body> </html>
2.單獨設定某一個角
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ /*設定寬度和高度 單位px（畫素）*/ width: 100px; height: 100px; /*邊框設定圓角*/ border: 4px solid red; /*設定左上角*/ border-top-left-radius: 20px; /*設定右上角*/ border-top-right-radius: 20px; /*設定左下角*/ border-bottom-left-radius: 20px; /*設定右下角*/ border-bottom-right-radius: 20px; } </style> </head> <body> <div class="box"></div> </body> </html>
3.設定圓
在style裡面的css程式碼加入下面這句程式碼就可以實現圓的效果。需要注意的是，必須是一個正方形。
border-radius: 50%;
4.設定橢圓
在style裡面的css程式碼加入下面這句程式碼就可以實現圓的效果。需要注意的是，必須是一個長方形。
border-radius: 50%;