CSS border-radius 帶邊框

admin發表於2019-11-20
CSS

關於border-radius屬性基本用法可以參閱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: 30px solid green;
   border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

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

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

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

（1）.邊框的尺寸是30px，圓角半徑的尺寸是20px。

（2）.圓角所在圓的圓心並不在div的內容之內，而是位於邊框之內。

（3）.所以只有外部的圓角效果，內部沒有圓角效果。

下面將圓角半徑加大，程式碼例項如下：

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

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

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

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

（1）.邊框的尺寸是30px，圓角半徑的尺寸是50px。

（2）.圓角所在圓的圓心在div的內容之內。

（3）.所以內外都有圓角效果。

內半徑的尺寸等於外半徑尺寸減去對應方位邊框的尺寸。

比如，垂直內半徑尺寸=垂直外半徑尺寸-垂直方位邊框尺寸，也就是50px-30px=20px。

相關文章