border-radius以百分比設定圓角

螞蟻小編發表於2017-04-16

關於border-radius屬性的基本用法可以參閱CSS3 border-radius圓角一章節。

下面介紹一下以百分比方式設定圓角效果特別注意的地方，需要的朋友可以做一下參考。

繪製一個圓形非常的簡單，看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:100px;
  background:green;
  border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼繪製了一個綠色的圓形。

非常的簡單，首先建立一個正方形，然後將圓角的半徑設定為正方形寬度或者高度的一半即可。

border-radius屬性值為百分比同樣可以實現我們的要求，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:100px;
  background:green;
  border-radius:50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

設定屬性值為百分之五十同樣可以實現效果，有沒有想過為什麼是百分之50%，如果百分之六十呢。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:100px;
  background:green;
  border-radius:60%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

設定百分之六十也是能夠繪製一個圓形，下面對此做一下介紹。

[CSS] 純文字檢視 複製程式碼
border-radius:60%;

上面的程式碼是設定四個角的水平半徑和垂直半徑都是對應的寬和高的百分之六十。

很明顯在水平方向和垂直方位相鄰兩個角的半徑之和大於div的寬度和高度，這很明顯是不合理的。

這個時候，渲染引擎會同時均勻縮放水平和垂直方位的半徑，直到恰好適合div的寬度或者高度。

其實對於非百分比的數字也是同樣的道理，上面僅僅是以百分比做個引子而已:

[CSS] 純文字檢視 複製程式碼
div {
  width:100px;
  height:100px;
  background:green;
  border-radius:60px;
}

同樣也會進行縮小，以恰好適合div的寬度或者高度。

相關文章