css3 border-radius

admin發表於2018-07-20
CSSS3

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:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

使用border-radius:10px實現了一個矩形圓角效果。

如果border-radius只有一個屬性值，那麼同時設定四個圓角的半徑，這裡的10px就是圓角的半徑值。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/20/011043d2zy277pvisudwyf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看出圓角半徑分為水平半徑和垂直半徑，border-radius提供了設定水平半徑和垂直半徑的方式:

[CSS] 純文字檢視 複製程式碼
border-radius:水平半徑/垂直半徑

兩者之間用"/"分隔，如果只設定水平半徑，那麼垂直半徑的值和水平半徑值相同，例如在以上例項中只設定了水平半徑，那麼水平半徑的值也應用於垂直半徑。水平半徑和垂直半徑都可以分別設定四個值:

（1）.如果只設定了一個值，那麼四個圓角都使用這個值。

（2）.如果設定了兩個值，第一個值作用於左上角和右下角，第二個值作用於右上角和左下角。

（3）.如果設定了三個值，第一個值作用於左上角，第二個值作用於右上角和左下角，第三個值作用於右下角。

（4）.如果設定了四個值，那麼分別作用於四個角，從左上角開始，按順時針。

注:屬性值可以用整數也可以用百分比，具體可以參閱border-radius以百分比設定圓角一章節。

設定兩個值:

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

設定三個值:

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

設定四個值:

[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:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:30px 50px 60px 80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

在以上程式碼中，設定的水平半徑和垂直半徑都是相同的，下面給出幾個分別設定水平半徑和垂直半徑的程式碼:

[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:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:30px/80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
  <div></div> 
</body> 
</html>

以上程式碼可以將四個圓角的水平半徑和垂直半徑值設定為30px和80。

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

以上程式碼將左上角和右下角的水平半徑值設定為30px，右上角和左下角的半徑值設定為60px，將四個圓角的垂直半徑設定為80px。

單獨設定圓角:

設定圓角半徑值類似於設定邊框值一樣，可以單獨設定某一個圓角的半徑值:

（1）.border-top-left-radius用於設定左上角圓角半徑值。

（2）.border-top-right-radius用於設定右上角圓角半徑值。

（3）.border-bottom-right-radius用於設定右下角圓角半徑值。

（3）.border-bottom-left-radius用於設定左下角圓角半徑值。

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

以上程式碼可以將左上角圓角的水平半徑和垂直半徑都設定為80。

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

以上程式碼將左上角圓角的水平半徑和垂直半徑設定為40px和80px。這裡就不用"/"分隔了，用空格即可。

上面所有的程式碼都是設定水平半徑和垂直半徑是相同的，因為一個方位上的圓角只使用一個值。

下面通過程式碼例項介紹一下如何分別設定水平半徑和垂直半徑。

程式碼例項如下:

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


[CSS] 純文字檢視 複製程式碼
border-radius:100px 50px 80px/ 60px 50px;

上面的程式碼與下面程式碼等價:

[CSS] 純文字檢視 複製程式碼
border-top-left-radius: 100px 60px;
border-top-right-radius: 50px 50px;
border-bottom-right-radius: 80px 60px;
border-bottom-left-radius: 50px 50px;

如果元素具有邊框，那麼就要分內圓角和外圓角，可以參閱border-radius帶border邊框一章節。

相關文章