html中圆⾓怎么写,html中的圆⾓
今天给⼤家讲⼀下html中的圆⾓，以及如何实现圆⾓。
最早的时候，我们都是⽤图⽚，做⼀个圆⾓的图⽚，做成背景，或者在容器的⾓落⾥⾯应⽤⼀下这张图⽚，这么做很容易实现。随着时间的迁移，发现⼩图⽚太多了，增加浏览器发送的请求数量，⼜增加下载的数据量，⽽且⼤家都开始扁平化设计了。
css3中有⼀些属性可以⽤来实现圆⾓，但是对IE6-8的⽀持不好，各种不同的浏览器也有⾃⼰的解释规则。
/*通⽤圆⾓ */
.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;
border radius什么意思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;
}
主要是三个属性
-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⼀下版本需要
behavior: url(../public/css/pie.htc); /*for IE*/
这⼀句话，需要下载pie.htc⽂件，还有⼀个iecss3.htc⽂件，我尝试了⼀下，兼容性不如pie.htc。
还可以使⽤js，jquery有⼀个插件js，我也尝试了⼀下，在firefox30.0中不兼容，没有出来效果。效果图
附件是我的代码，⼤家可以下载尝试⼀下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。