css绘制圆形的原理

Question

请问用css绘制圆形和半圆的原理是什么?

另外为什么用%和px做单位效果会不一样?比如

div{

            width:100px;

            height:100px;

            border:1px solid #ccc;

            border-radius:50px;

        }

这样就能画出一个标准的圆形,可是把宽高设成10px,圆角设成5px,就不是标准的圆形了,请看截图

为什么会这样,必须用%吗?

Answer 1

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

Answer 2

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

Answer 3

哇，你居然不是机器人。吃惊~