border-radius图解

时间:2021-10-28 15:21:51

border-radius图解

自己看了理解的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)进行测试:
border-radius图解