css3 绘制实心圆图标，代替图片实现 - css

一、css3 绘制实心圆图标，代替图片实现

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

二、效果

css3ç»å®å¿å

三、代码

<!DOCTYPE html>
<head>
<meta name="renderer" content="webkit"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.circle{
    width:100px;
    height:100px;
    background-color:#cb18f8;
    border-radius:50px; /* 图形的半径 */
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

.....

转载请注明：谷谷点程序 » css3 绘制实心圆图标，代替图片实现