border-radius图解

最新推荐文章于 2022-09-05 16:06:06 发布

weixin_30537391

最新推荐文章于 2022-09-05 16:06:06 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaoyao-sun/p/5511328.html

本文详细解析了CSS中border-radius属性的使用方法，包括不同参数设置下的形状变化、浏览器兼容性及对背景的影响，并提供了测试结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己看了理解的border-radius：
设置参数：
100*100的正方形，第一个：border-top-left-radius：100px 100px,即圆的半径为100px。圆弧与上和左border相切。
第二个：border-top-left-radius：60px 60px,即圆的半径为60px。圆弧与上和左border相切
第三个：border-top-left-radius:40px 60px ,即一个椭圆。圆弧与上和左border相切。

总结上面：首先，设置详细的x轴和y轴半径，然后是哪个顶点，这个圆或者椭圆就和对应的边相切，比如设置的是top-left的，就与上和左边相切确定圆弧。设置bottom-right的，就与下和右边相切确定圆弧。

兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
-moz-border-radius:。。px; /* 老的 Firefox */

js语法：object.style.borderRadius="。。。px"；

简写形式border-radius顺序：左顶点开始顺时针书写。

注意：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同，即是一个对角关系，×。如果省略 top-right，则与 top-left 相同。

另外值还有%的书写形式。
今早突然想起来，还有大于100px的时候没有测试

测试结果：在半径大于边长时的效果和等于边长时的效果一样，也就是半径的最大值为边长，当半径超过边长时，值再大也是一个效果。

另外：border-radius属性对背景色或者背景图也有影响，情况如下，这些背景顺便设置了一下background-clip的值（设置背景颜色或者背景在盒模型中的覆盖范围，三值：border-box，padding-box，content-box）进行测试：