首页 > 网站 > WEB开发 > 正文

css3 border-radius

2024-04-27 14:26:31
字体:
来源:转载
供稿:网友
CSS3 border-radius

前缀对应浏览器

前缀

浏览器

-webkit

Chrome和safari

-moz

Firefox

-ms

IE

-o

Opera

border-radius:

<style type="text/css">div.circle{    height:100px;/*与width设置一致*/    width:100px;    background:#9da;    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/    }div.same{    height:100px;    width:50px;    background:#9da;}.semi-circle{     border-radius:50px 0 0 50px;    }.test{    border-radius: 50% 0 0 50%;}   </style><body><div class="circle"></div><br/><div class="same semi-circle "></div><br/><div class="same test"></div></body>

可见设置50%和设置50px这样的固定值还是有差别的,没研究百分比以什么为参考,所以现在不知道怎样通过百分比设置一个左半圆。

参考:

https://css-tricks.com/almanac/PRoperties/b/border-radius/


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表