理解border-radius
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 512
border-radius:由浮点数字和单位标识符组成的长度值。border-top-left-radius---左上border-top-right-radius---右上border-botto

border-radius:由浮点数字和单位标识符组成的长度值。
border-top-left-radius              ---   左上
border-top-right-radius            ---   右上
border-bottom-right-radius      ---   右下
border-bottom-left-radius        ---   左下

说明:第一个值是水平半径,如果为0则为直角

圆形
border-radius:50px; width:100px; height:100px; border:1px solid red;

半圆
border-radius: 100px  0px  0px  100px; height: 100px; width: 50px;

四分之一
border-radius:100px; width:100px; height:100px; border:1px solid red;

圆角
border-radius: 10px; height: 60px; width: 100px;

弧形
border-radius: 100px  0px  0px  0px; height: 100px; width: 100px; border-left: 1px solid red;border-top: 1px solid red;

以上效果图如下:

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2