css3画实心圆和圆角的方法 - html技术
小开开 2021-05-10 16:58:00 2021-05-10 115 0
css3画实心圆和圆角的方法
当你要用到一个圆形icon的时候，你可能想到通过图片软件来制作，事实上也确实如此，在css3之前，大家都是通过图片+css来实现各种各样的样式效果。不过在css3出来之后，这种方法就显得有点落伍了，它不但需要较多的代码来实现，且要另外制作图片，实在是繁琐。现在，我们用css3的代码，轻松就能画出实心圆了。
css3画实心圆
实现方法相当简单，css代码如下：
.circle{
width:100px;height:100px;background-color:#cb18f8;border-radius:50px;/* 图形的半径 */
}代码分析：
1）
width
和height
是定义一个矩形，它们的值均设为100px，即是画一个正方形。2）
background-color
是定义图形的背景颜色。3）
border-radius
是定义图形的半径，这里是50px，即是正方形边长的一半。border-radius
也可以用百分比来表示，如本例50px可以换为50%，效果是一样的。css3实现各种圆角的效果
我们可以把
border-radius
换成不同的数字，就能实现各种圆角的效果。
css3画圆角
上图的代码只需把
border-radius
设为5px，代码如下：.circle{
width:100px;height:100px;background-color:#cb18f8;border-radius:5px;/* 圆角的大小 */
}如果不想4个角都是圆角，例如在很多导航菜单里，只需上面两个角是圆角，又如何实现呢？
css3画圆角
仍然是修改
border-radius
，不过写法有点不同，代码如下：.circle{
width:100px;height:100px;background-color:#cb18f8;/* 圆角的大小 排序：左上角 右上角 右下角 左下角 */border-radius:5px 5px 0 0;}border-radius 属性其实可以分为四个其他的属性，在使用时可单独设置：
border-radius-top-left
/左上角/
border-radius-top-right/右上角/
border-radius-bottom-right/右下角/
border-radius-bottom-left/左下角/
本文实例演示
注意问题
本文css3代码不支持IE8浏览器，但支持IE9+浏览器，确切来说，是IE8不认
border-radius
这个css属性，所以在IE8浏览器里，文中实例代码永远是显示一个正方形。