使用`border-radius`創建一個圓形

我正在閱讀Jon Duckett的HTML和CSS，並已被引入到border-radius屬性中。使用`border-radius`創建一個圓形

我想用下面的代碼創建一個圓圈，但圓圈並不完美。我使用的是半徑50px，但它並不完美。

p { border: 5px solid #ee3e80; padding: 10px; width: 100px; height: 100px; display: inline-block; margin: 20px; } p.three { padding: 0px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; }

<p class="three"></p>

我在做什麼錯？

來源

2017-08-09 Dave Smith

對於'border-radius'屬性，您不應該使用供應商preixes，因爲它們適用於非常舊的瀏覽器（Firefox 4-，Chrome 4-，Safari 5-）。 –

padding和border的寬度被另外計算到width和你的元素的height。

你有不同的選擇來解決這個問題：

添加box-sizing: border-box到你的元素，它定義什麼應該包括在大小計算
使用border-radius: 50%
添加您的邊框寬度和填充到您border-radius 。

這裏的解決方案只是box-sizing

p { 
 
    display: inline-block; 
 

 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 

 
    /* these values get added to your 100px by default */ 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50px; 
 
    
 
    /* now width and height determine how big your 
 
    element is as a whole */ 
 
    box-sizing: border-box; 
 
}

<p class="three"></p>

有關CSS盒模型看this article from MDN更詳細的解釋。

來源

2017-08-09 18:47:05 lumio

它應該是50%而不是50px。無論元素的大小如何，50%都將繪製一個圓。如果元素足夠小，設置像素值將只繪製一個圓。

見下文。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

來源

2017-08-09 18:45:34

這是因爲你沒有考慮到邊界寬度來的寬度，每邊都是5px。所以總寬度是110px，所以你的邊界半徑將需要爲55px。更簡單的方法是將border-radius設置爲50%。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

來源

2017-08-09 18:47:06 zsawaf

你只需要添加50%到border-radius財產。下面是一個片段，你會發現它是一個完美的圓圈。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

來源

2017-08-09 18:49:44 user5854648

沒有理由像素值不應該工作。這並不能解釋實際問題。 – isherwood

另一種選擇是你的元素的box-sizing屬性設置爲border-box（如我的幾乎所有元素做）。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
    box-sizing: border-box; /* < -------------------- here */ 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
}

<p class="three"></p>

Border-box考慮到邊境做數學的時候，一般當全線採用簡化的佈局和樣式。像Bootstrap的庫do this for you。

來源

2017-08-09 18:55:16 isherwood

使用`border-radius`創建一個圓形

回答

相關問題