技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
服务器技术
操作系统
网站运营

分类目录

热门标签

赞助商

搜索

css3画实心圆和圆角的方法

作者:admin    时间:2017-7-24 14:7:39    浏览:

当你要用到一个圆形icon的时候,你可能想到通过图片软件来制作,事实上也确实如此,在css3之前,大家都是通过图片+css来实现各种各样的样式效果。不过在css3出来之后,这种方法就显得有点落伍了,它不但需要较多的代码来实现,且要另外制作图片,实在是繁琐。现在,我们用css3的代码,轻松就能画出实心圆了。

css3画实心圆

css3画实心圆

实现方法相当简单,css代码如下:

.circle{
width:100px;
height:100px;
background-color:#cb18f8;
border-radius:50px; /* 图形的半径 */
}

execcodegetcode

代码分析:

1) widthheight 是定义一个矩形,它们的值均设为100px,即是画一个正方形。

2)background-color 是定义图形的背景颜色。

3)border-radius 是定义图形的半径,这里是50px,即是正方形边长的一半。border-radius 也可以用百分比来表示,如本例50px可以换为50%,效果是一样的。

css3实现各种圆角的效果

我们可以把 border-radius 换成不同的数字,就能实现各种圆角的效果。

css3画圆角

css3画圆角

上图的代码只需把 border-radius 设为5px,代码如下:

.circle{
width:100px;
height:100px;
background-color:#cb18f8;
border-radius:5px; /* 圆角的大小 */
}

execcodegetcode

如果不想4个角都是圆角,例如在很多导航菜单里,只需上面两个角是圆角,又如何实现呢?

 css3画圆角

css3画圆角

仍然是修改  border-radius ,不过写法有点不同,代码如下:

.circle{
width:100px;
height:100px;
background-color:#cb18f8;
/* 圆角的大小 排序:左上角 右上角 右下角 左下角 */
border-radius:5px 5px 0 0;
}

execcodegetcode

border-radius 属性其实可以分为四个其他的属性,在使用时可单独设置:

border-radius-top-left /*左上角*/
border-radius-top-right /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left /*左下角*/

本文实例演示

demodownload

注意问题

本文css3代码不支持IE8浏览器,但支持IE9+浏览器,确切来说,是IE8不认 border-radius 这个css属性,所以在IE8浏览器里,文中实例代码永远是显示一个正方形。

标签: css3  实心圆  圆角