开启辅助访问
智能 [热门需求]
或 免费发布需求
快捷导航
返回列表 发新帖

css绘制圆形的原理

hy2***
时代问答 问答社区
请问用css绘制圆形和半圆的原理是什么?另外为什么用%和px做单位效果会不一样?比如div{      width:100px;      height:100px;      border:1px solid #ccc;      border-radius:50px;    }这样就能画出一个标准的圆形,可是把宽高设成10px,圆角设成5px,就不是标准的圆形了,请看截图为什么会这样,必须用%吗?
CSS3Html5
显示全部楼层

免责声明：本内容仅代表回答者见解不代表本站观点，请谨慎对待。

版权声明：作者保留权利，不代表本站立场。

回复

使用道具 举报

上一主题 下一主题

参与会员3

m7141***
不不不，这个并不是标准的圆，视觉错误。
标准的圆，border-radius的值同于宽高，宽高也应一致。
你写的是简写属性，该属性的子属性实在太多，我就讲个典型
border-radius: x/y;
看到没有，x代表水平偏移量，y代表垂直偏移量，两者以正斜线相隔。
当你只写了一个值，那么水平，垂直偏移量都为该值。
来一张渣图



水平偏移量 %值相对 宽度参考
垂直偏移量%值相对 高度参考
所以你要画一个标准的圆，width=height radius:100%;
如果不用%，那么width=height=radius
回复

使用道具 举报

ZyuA***
其实它已经是一个圆了，只不过你要看它的效果而加了border的宽度w，从而导致整图形的尺寸变成了10px+w；
但是你的border-radius弧度却仍是5px；所以就导致了你看上去不是标准的圆形了
回复

使用道具 举报

cpi***
哇，你居然不是机器人。吃惊~
回复

使用道具 举报

可能感兴趣的问答

发新帖
TA的信息
  • 会员所属： 注册会员
  • 认证信息： 邮箱认证手机认证

最新任务

更多 >

最新问答

  • 微信访问
  • 手机APP

优

优秀人才 汇聚时代

快

及时响应 快速匹配

专

专注软件 众包服务

保

信息保障 隐私保护
友情链接 : 时代威客网 有招网 自考365 测试网

  • 微信小程序

  • 新浪微博

  • 手机客户端