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中不兼容，没有出来效果。

效果图

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

html 中圆角怎么写,html中的圆角相关推荐

python中查看表头的函数_Python中也可以写Excel中的“Vlookup”函数？太牛逼了吧！...
原标题:Python中也可以写Excel中的"Vlookup"函数?太牛逼了吧! Vlookup函数,可以算是一个数据专员必须要会使用的基本函数了,确实很好用.但是你可能会注意到, ...
html中单选怎么写,Html中的文本框和单选按钮
Html中的文本框和单选按钮用来制作页面的登录注册使用.. HtmlDemo 用户名: 密码: 确认密码: 性别: 男女年龄: 下面是mycss.css部分 ------------------- ...
excel vlookup用法_Python中也可以写Excel中的“Vlookup”函数？太牛逼了吧！
Vlookup函数,可以算是一个数据专员必须要会使用的基本函数了,确实很好用.但是你可能会注意到,Excel一旦数据量过大,打开都费劲了,何况打开后,你还要输入公式计算,就更费劲了,此时你有没有想到过 ...
Python中也可以写Excel中的“Vlookup”函数？太牛逼了吧！
来源:数据分析与统计学之美 Vlookup函数,可以算是一个数据专员必须要会使用的基本函数了,确实很好用.但是你可能会注意到,Excel一旦数据量过大,打开都费劲了,何况打开后,你还要输入公式计算,就 ...
html中透明度怎么写,css中控制透明度
CSS中如何控制层的透明度? 在CSS样式中设置背景的透明度,下面一个具体的实例.把类为box的层设为透明. .box{width:300px; height:200px; margin:0 auto ...
php中退出怎么写,php中退出登录怎么写
php中退出登录的写法:首先释放当前在内存中已经创建的所有[$_SESSION]变量,代码为[session_unset]:然后删除当前用户对应的session文件以及释放session id,代码为 ...
html中热点怎么写,HTML中给图片添加热点
一.HTML示例代码: 1 2 3 4 图片热点的设置 5 6 7 8 13 14 15 16 17 21 22 23 24 25 26 27 二.使用ismap获取热点坐标如图所示: 三.map标签 ...
html中相对定位怎么写,html中相对定位与绝对定位
来讲讲html中相对定位与绝对定位,有的后端同学对html的相对定位与绝对定位,不太熟的福利来了,本篇对于html的相对定位与绝对定位讲的很详细呢! html是整个文档空间,body是html中的文档 ...
html中相对定位怎么写,css中的怎么设置相对定位？
设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. css中的怎么设置相对定位? 想要设置相对定位,需要在元素中使用position属性,将其值设置为rela ...

html 中圆角怎么写,html中的圆角

html 中圆角怎么写,html中的圆角相关推荐

最新文章

热门文章