css的border-radius属性可以实现圆角、圆形、椭圆形。
实现上述圆角的前提是盒子要有边框。
规则圆角
下面的示例演示了圆角、赛道、圆形，我们先看效果图。
下面是实现的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角</title> <style> div{ margin:20px; } div.one{ 50px; height:50px; border:1px solid #333; border-radius:7px; } div.two { 120px; height:50px; border:1px solid #333; border-radius:50px; } div.three { 120px; height:120px; border:1px solid #333; border-radius:120px; } </style></head><body><h1>利永贞网</h1><div class="one"></div><div class="two"></div><div class="three"></div></body></html> |
下面来说明border-radius属性：
- 它的值 最大是盒子的最小边长，如第二个图形，最小边长是50px高，不管border-radius属性的值是200，还是500，border-radius属性的值最终都是50px，即盒子的最小边长高的那边50px.
- border-radius 在指定一个值是，它指的是4个角的值。包括：
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-top-left-radius
不规则圆角
通过为4个不同的角设置不同的值可以实现不对称的形状。
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-top-left-radius
这4个属性同时有两个值，如果指定一个值，那么两个值都相同。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角</title> <style> div{ margin:20px; } div.one{ 50px; height:50px; border:1px solid #333; border-radius:1em 2em 1em 2em; } div.two { 120px; height:50px; border:1px solid #333; border-radius:1em 4em 1em 2em / 2em 1em 2em 1em; } div.three { 120px; height:120px; border:1px solid #333; border-top-right-radius: 120px 30px; border-top-left-radius:70px 50px; } </style></head><body><h1>利永贞网</h1><div class="one"></div><div class="two"></div><div class="three"></div></body></html> |
计算结果：
