设置百分比值和像素值的圆角是有区别的

设置百分比值和像素值的圆角是有区别的

工具与关键技术:【DW】/HTML
作者:#33
撰写时间:2019.01.18

在html入门学习中遇到的小问题

在css写样式时我通常会给设置的盒子圆角效果,但设置百分比值与像素值是有区别的,
如:
1.设置的盒子是正方形时,百分比设置的范围值是:(0%50%)当值达到50%时形成一个圆,超过50%之后不再变化;像素设置的范围值是:(0px边长的1/2+px)当值达到边长的一半后不再变化。详情见下图:
在这里插入图片描述
2. 设置的盒子是矩形(长宽不等)时,百分比设置的范围值是:(0%50%)当值达到50%时形成一个椭圆,超过50%之后不再变化;像素设置的范围值是:(0px最短边长的1/2+px)当值达到最短边长的一半后不再变化。详情见下图:
长>宽时:
在这里插入图片描述
宽>长时:
在这里插入图片描述
3.下图就是设置百分比值时无法达到效果列子,input标签、button标签通常设置像素值调圆角
在这里插入图片描述 当然我们也可以看自己的喜好怎样好看怎样设。 欢迎大家来讨论分享与学习!