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;

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有一个插件jquery.corner.js,我也尝试了一下,在firefox30.0中不兼容,没有出来效果。

效果图

0818b9ca8b590ca3270a3433284dd417.png

附件是我的代码,大家可以下载尝试一下。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值