CSS border-radius

admin發表於2019-11-20
CSS

繪製圓角效果是常見的操作，因為帶有一定弧度的圖案更加圓潤自然。

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 { 
  margin:0px auto;
  width: 100px; 
  height: 100px; 
  background-color:green;
  border-radius: 50px; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

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

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

矩形的寬高是100px，並將圓角半徑設定為50px，生成一個圓形圖案。

可見通過border-radius屬性可以非常簡單的實現圓角效果，下面詳細對其進行分析。

一.語法結構：

border-radius屬性繪製的圓角不一定是正圓，也可能是橢圓，具體效果由水平半徑與垂直半徑決定。

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

簡單總結如下：

（1）.一個矩形可以具有一到四個圓角。

（2）.圓角是一個正圓或者橢圓的四分之一。

（3）.圓角的水平半徑和垂直半徑並不一定相等。

屬性值規定圓角半徑的尺寸，既可以是length格式，也可以是百分比格式，後續文章會進行詳細分析。

屬性值大致可以分為具有斜槓和不具有斜槓兩種。

不具有斜槓：

如果引數值不具有斜槓，那麼水平半徑與垂直半徑尺寸相同。

（1）.一個屬性值：

此屬性值作用於四個圓角，程式碼片段如下：

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

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

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

（2）.兩個屬性值：

第一個屬性值作用於左上和右下圓角。

第二個屬性值作用於右上和左下圓角。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 20px 10px;
}

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

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

（3）.三個屬性值：

第一個屬性值作用於左上圓角。

第二個屬性值作用於右上和左下圓角。

第三個屬性值作用於右下圓角。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 20px 10px 30px;
}

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

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

（4）.四個屬性值：

第一個屬性值作用於左上圓角。

第二個屬性值作用於右上圓角。

第三個屬性值作用於右下圓角。

第四個屬性值作用於左下圓角。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 10px 20px 30px 40px;
}

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

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

具有斜槓：

不具有斜槓的時候，水平半徑與垂直半徑的尺寸沒法分別規定。

採用具有斜槓的語法結構，可以解決上述問題，看如下程式碼：

[CSS] 純文字檢視 複製程式碼
div {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
}

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

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

分析如下：

（1）.斜槓左側的引數用於規定圓角水平直徑尺寸。

（2）.斜槓右側得引數用於規定圓角垂直直徑尺寸。

（3）.兩側的資料按照左上角、右上角、右下角和左下角順序生效。

（4）.兩側資料可以規定一個或者四個，生效順序與沒有斜槓時相同。

二.百分數作為屬性值：

屬性值也可以是百分比格式，使用方式與length格式相同。

唯一需要搞清楚的是，百分別格式的尺寸參考物件。

為了節省篇幅，具體參閱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 {
  margin:0px auto;
  width: 100px;
  height: 100px;
  background-color:green;
  border-radius: 200px;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

div的寬高都是100px，但是設定圓角半徑尺寸是200px。

很明顯，相鄰圓角直徑的和是400px，遠超過div的尺寸。

這個時候，瀏覽器會自動重新計算一個恰當的值，保證使它們處於不重合的臨界狀態。

所以瀏覽器重新給半徑賦值為50px，恰好生成一個正圓，相鄰的直徑恰好不會重合。

五.水平直徑和垂直直徑尺寸比例規定：

這是很重要的一個特點，很多初學者比較容易忽視。

看如下程式碼例項：

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

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

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

程式碼分析如下：

（1）.規定水平和垂直半徑的尺寸都為200px。

（2）.但是矩形寬度只有200px，所以瀏覽器會重新計算，將水平直徑尺寸定位100px。

（3）.矩形高度是300px，那是不是垂直半徑被重新計算為150px呢，答案是否定的。

（4）.我們規定水平和垂直半徑的尺寸都是200px，它們是相等的，這個比例要永恆保持下去。

（5）.所以垂直半徑的尺寸也是100px。

相關文章