參加web前端校招的同學們經常會遇到這樣的面試題：用HTML+CSS畫出一個同心圓。
例如：
這道題主要考驗的是基礎盒模型布局能力和倒圓角屬性的巧用。
1、html代碼
- <body>
- <div id="circle_bot">
- </div>
- <div id="circle_mid">
- </div>
- <div id="circle_top">
- </div>
- </body>
html部分代碼很簡單，只需要三個DIV標簽即可，記得分別命名，這樣在CSS中方便單獨選中。
2、CSS代碼：
- <style type="text/css">
- #circle_bot{
- background-color:#E09;
- width: 150px;
- height: 150px;
- margin: 0px 0 0 0px;
- border-radius: 50%;
- }
- #circle_mid {
- background-color:#EAA;
- width: 100px;
- height: 100px;
- margin: -125px 0 0 25px;
- border-radius: 50%;
- }
- #circle_top{
- background-color:#ED9;
- width: 50px;
- height: 50px;
- margin: -75px 0 0 50px;
- border-radius: 50%;
- }
- </style>
分別用id選擇器選中三個div，然后給予不同的背景色予以區分。
從底圓到頂圓依次設定寬高（事實上此時還是個正方形），按照位置設置偏移位置，margin的四個偏移值分別對應上、右、下、左的邊距，負數則表示反方向。
border-radius是倒圓角，數值可以使用像素，為了簡單起見設置50%則倒圓角的半徑默認是該DIV寬度的50%。