今天给大家讲一下html中的圆角，以及如何实现圆角。
最早的时候，我们都是用图片，做一个圆角的图片，做成背景，或者在容器的角落里面应用一下这张图片，这么做很容易实现。
随着时间的迁移，发现小图片太多了，增加浏览器发送的请求数量，又增加下载的数据量，而且大家都开始扁平化设计了。
css3中有一些属性可以用来实现圆角，但是对IE6-8的支持不好，各种不同的浏览器也有自己的解释规则。
|
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
|
/*通用圆角 */
.corner{
-moz-border-radius:
10px
;
/* Firefox - */
-webkit-border-radius:
10px
;
/* Safari and Chrome - */
border-radius:
10px
;
behavior:
url
(../public/css/pie.htc);
/*for IE*/
width
:
100px
;
height
:
100px
;
background
:
#000000
;
}
/* 上圆角 */
.cornerT{
-moz-border-radius:
10px
10px
0px
0
;
/* Firefox - */
-webkit-border-radius:
10px
10px
0px
0
;
/* Safari and Chrome - */
border-radius:
10px
10px
0px
0
;
behavior:
url
(../public/css/pie.htc);
/*for IE*/
width
:
100px
;
height
:
100px
;
background
:
#000000
;
}
/* 下圆角*/
.cornerB{
-moz-border-radius:
0
0
10px
10px
;
/* Firefox - */
-webkit-border-radius:
0
0
10px
10px
;
/* Safari and Chrome - */
border-radius:
0
0
10px
10px
;
behavior:
url
(../public/css/pie.htc);
/*for IE*/
width
:
100px
;
height
:
100px
;
background
:
#000000
;
}
|
主要是三个属性
|
1
2
3
|
-moz-border-radius:
0
0
10px
10px
;
/* Firefox - */
-webkit-border-radius:
0
0
10px
10px
;
/* Safari and Chrome - */
border-radius:
0
0
10px
10px
;
|
如果兼容IE8一下版本需要
|
1
|
behavior:
url
(../public/css/pie.htc);
/*for IE*/
|
这一句话，需要下载pie.htc文件，还有一个iecss3.htc文件，我尝试了一下，兼容性不如pie.htc。
还可以使用js，jquery有一个插件jquery.corner.js，我也尝试了一下，在firefox30.0中不兼容，没有出来效果。
效果图
附件是我的代码，大家可以下载尝试一下。
本文转自 virusswb 51CTO博客，原文链接：http://blog.51cto.com/virusswb/1430032，如需转载请自行联系原作者
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)