您现在的位置: 365建站网 > 365学习 > CSS3属性之圆角效果—border-radius用法

CSS3属性之圆角效果—border-radius用法

文章来源:365jz.com     点击数:234    更新时间:2017-12-21 11:49   参与评论

讲到CSS3的border-radius这个玩意,可以很好玩。比如:圆角矩形,圆,椭圆等等。

CSS3 border-radius是什么?

border-radius的含义是:圆角。

CSS3 border-radius的书写格式:

border-radius:apx,比较常见,其中a表示数值,下同;

-webkit-border-top-left-radius:apx,类似这种的写法还是很实用的,但一定要记住顺序,一句话:先写Y轴,再写X轴

注意:上诉的-webkit-是兼容webkit内核的写法,-moz-内核的写法有所不同,如:-moz-border-radius-topleft:apx

下面我们通过几个实例演示说明border-radius的用法:

CSS3 border-radius 圆角矩形:

.demo01{
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

CSS3 border-radius 圆角矩形2:

.demo02{
-webkit-border-radius:36px;
-moz-border-radius:36px;
}

CSS3 border-radius 圆:

.demo03{
height:300px;
line-height:300px;
-webkit-border-radius:300px;
-moz-border-radius:300px;
}

CSS3 border-radius 漂亮圆角:

.demo04{
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
}

CSS3 border-radius 椭圆:

.demo05{
height:300px;
-webkit-border-radius:180px;
-webkit-transform:rotatex(60deg);
}

CSS3实现圆角需要使用border-radius属性,但因为浏览器兼容性的问题,在开发过程中要加私有前缀。

-webkit-border-radius
-moz-border-radius
-ms-border-radius
-o-border-radius

border-radius属性其实可以分为四个其他的属性:

border-radius-top-left         /*左上角*/
border-radius-top-right       /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left   /*左下角*/
//提示:按顺时针方式

下面用几个实例来展示border-radius的具体用法。

1、border-radius单个属性值:

//HTML清单

<div class="roundedCorner">
.roundedCorner{
    width:100px;
    height:100px;
    background-color:#f90;
    border-radius:10px;//左上,右上,右下,坐下都是10px
}

效果:

                                              

2、border-radius是个属性值方式:

<div class="roundedCorner2"></div><br/><br/><br/>//HTML清单
.roundedCorner2{
    width:100px;
    height:100px;
    background-color:#f99;
    border-radius:20px 10px 5px 2px;
}

 效果:

                                            

不过在开发的过程中(我的工作中),经常用到的是border-radius单属性值,设置4个不同圆角的情况很少。

border-radius的优势不仅仅在制作圆角的边框,还是利用border-radius属性来画圆和半圆。

1、制作半圆的方法:

元素的高度是宽度的一半,左上角和右上角的半径元素的高度一致(大于高度也是可以的,至少为height值)。

<div class="semi-circle"></div>
.semi-circle{
    width:100px;
    height:50px;//高度是宽度的一半
    background-color:#000;
    border-radius:50px 50px 0 0;//左上和右上至少为height值
}

效果: 

                                                     

知道了如何画上半圆,就会举一反三画其他方向的圆了,这里不再赘述。

 

2、画实心圆的方法:

宽度和高度一致(正方形),然后四个角设置为高度或者宽度的1/2.

<div class="circle"></div>
.circle{
    width:100px;
    height:100px;
    background-color:#cb18f8;
    border-radius:50px;
}

效果:

                                                       

 

总结:

CSS3实现圆角的方式既优雅又方便,但是兼容性不够好,如果需要考虑旧版本的浏览器的话,可以考虑优雅降级的方式。开始提到的两种方式的优点是兼容性好,但不够优雅。



如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (234人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------