首页 > 开发 > CSS > 正文

CSS3中Border-radius属性的运用方法

2023-04-12 19:32:24
字体:
来源:转载
供稿:网友

在CSS3中,Border-radius属性用来设置边框的圆角。是CSS3中级别最高的一个属性。

-webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

注意:请在Safari 5和IE9浏览器中执行“border-radius”语法。

这个属性可以做一个圆。

-moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;

如果想再添加点效果,我们可以利用Flexible Box Model来使得文字在垂直在水平方向都居中。这需要加点代码,但这仅仅是对不同浏览器的补偿。

display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;

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