您的位置:首页> 实例代码> CSS3实例

CSS 绘制圆环

2019-11-20 09:26| 作者: admin| 查看: 139| 评论: 0|来自: 钱柜手机网页版

由于CSS3的出现,绘制一些图形效果已经变的非常简单。

比如绘制圆环,在之前需要花费很大的功夫去实现,并且效果还不怎样。

下面通过border-radius属性绘制一个圆环效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style type="text/css">
div { 
  width: 100px; 
  height: 100px; 
  border: 50px solid green; 
  border-radius: 50%; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

绘制的代码非常简单,原理也很简单,在于对border-radius的理解。

关于上述属性可以参阅CSS border-radius一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS 绘制半圆

最新评论

返回顶部