[求助]CSS能实现圆弧吗?_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
4
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3866 | 回复: 3   主题: [求助]CSS能实现圆弧吗?        上一篇   下一篇 
blackTrc
注册用户
等级:少校
经验:853
发帖:13
精华:0
注册:2015-4-28
状态:离线
发送短消息息给blackTrc 加好友    发送短消息息给blackTrc 发消息
发表于: IP:您无权察看 2017-3-23 11:00:47 | [全部帖] [楼主帖] 楼主

想请教一下这个能用CSS样式实现吗

QQ截图20170323105846.png



66.jpg



赞(0)    操作        顶端 
_chen
版主
等级:中校
经验:2139
发帖:39
精华:0
注册:2013-8-23
状态:离线
发送短消息息给_chen 加好友    发送短消息息给_chen 发消息
发表于: IP:您无权察看 2017-3-23 11:48:20 | [全部帖] [楼主帖] 2  楼

这个可以实现,比较简单,可以使用伪类选择器before来实现

先上效果图

QQ截图20170323114551.png


html

<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>

CSS

div{margin: 20px; display: inline-block;border: 2px solid #46990D; color: #46990D; font-size: 20px; line-height: 100px; text-align: center;}
.item1{ width: 100px; height: 100px; border-radius: 50px; }
.item2{ width: 100px; height: 50px; border-radius: 50px 50px 0 0; }
.item3{ width: 50px; height: 100px; border-radius: 50px 0 0 50px; }
.item4{ width: 100px; height: 100px; border-radius: 100px 0 0 0; }
.item5{ width: 100px; height: 100px; border-radius: 50px; position: relative; }
.item5:before{ position: absolute; width: 50px; height: 50px; top: -2px; left: -2px; background: #fff; content: ""; }




赞(0)    操作        顶端 
_chen
版主
等级:中校
经验:2139
发帖:39
精华:0
注册:2013-8-23
状态:离线
发送短消息息给_chen 加好友    发送短消息息给_chen 发消息
发表于: IP:您无权察看 2017-3-23 12:02:48 | [全部帖] [楼主帖] 3  楼

不错此处有一个问题,弧形里面的文字会被盖住,这个也好解决,只需在标签内部嵌一个标签来显示文字,然后设置层比比父标签高就行

<div class="item5"><div class="score"><span>95</span>分</div></div>
div{margin: 20px; display: inline-block;border: 2px solid #46990D; color: #46990D; font-size: 14px; line-height: 100px; text-align: center;}
.item5{ width: 100px; height: 100px; border-radius: 50px; position: relative; z-index: 1; text-align: center; }
.item5:before{ position: absolute; width: 50px; height: 50px; top: -2px; left: -2px; background: #fff; content: "";  z-index: 1}
.item5 .score{position: relative; z-index: 2;  border:none; margin: 0;}
.item5 span{line-height: 100px;  font-size: 50px;}

效果:

QQ截图20170323120153.png



赞(0)    操作        顶端 
难得糊涂
注册用户
等级:列兵
经验:93
发帖:0
精华:0
注册:2017-3-20
状态:离线
发送短消息息给难得糊涂 加好友    发送短消息息给难得糊涂 发消息
发表于: IP:您无权察看 2017-3-23 12:46:22 | [全部帖] [楼主帖] 4  楼

学习了!



赞(0)    操作        顶端 
总帖数
4
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论