CSS border-radius 百分比

admin發表於2019-11-20
CSS

關於此屬性的具體用法可以參閱CSS border-radius一章節。

border-radius屬性值不但可以使length格式，也可以是百分比格式。

length格式有明確的值，百分比格式必須有一個參考物件，本文目就是搞清楚這個參考物件。

程式碼例項如下：

[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; 
  border: 50px solid green; 
  border-radius: 50px; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/172158kz819tonoad83qpn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼規定圓角尺寸是50px，邊框的尺寸也是50px。

所以內部沒有產生圓角效果，具體參閱CSS 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; 
  border: 50px solid green; 
  border-radius: 50%; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/172243nqn3nbx23rn54gi3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對上述程式碼進行一下分析：

（1）.此程式碼和第一段程式碼唯一的區別就是border-radius屬性值修改為50%。

（2）.很多人認為百分比的參考物件是元素width或者height。

（3）.如果真是這樣的話，border-radius實際值就是50px。

（4）.很明顯不是，因為否則兩段程式碼的效果就完全一樣了。

（5）.百分比的參考物件是：邊框+內邊距+height/width。

相關文章