CSS3的升級(jí)，支持邊框圓角，使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。
實(shí)例代碼一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程</title>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorners1">圓角</p>
</body>
</html>
|
實(shí)例一運(yùn)行效果：
CSS3 border-radius - 指定每個(gè)圓角
如果你在 border-radius 屬性中只指定一個(gè)值，那么將生成 4 個(gè) 圓角。
但是，如果你要在四個(gè)角上一一指定，可以使用以下規(guī)則：
- 四個(gè)值: 第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。
- 三個(gè)值: 第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角，第三個(gè)值為右下角
- 兩個(gè)值: 第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角
- 一個(gè)值： 四個(gè)圓角值相同
以下為三個(gè)實(shí)例:
1. 四個(gè)值 - border-radius: 15px 50px 30px 5px:
2. 三個(gè)值 - border-radius: 15px 50px 30px:
3. 兩個(gè)值 - border-radius: 15px 50px:
