您現在的位置: 365建站網 > 365學習 > CSS3屬性之圓角效果—border-radius用法

CSS3屬性之圓角效果—border-radius用法

文章來源:365jz.com     點擊數:301    更新時間: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實現圓角的方式既優雅又方便,但是兼容性不夠好,如果需要考慮舊版本的瀏覽器的話,可以考慮優雅降級的方式。開始提到的兩種方式的優點是兼容性好,但不夠優雅。



如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (301人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 国产区精品系列在线观看不卡| 人妻办公室被强奷| 嫩草影院网站进入| 性饥渴少妇性猛烈动作视频| 成 人 网 站 免费| 天天摸天天添天天爱| av免费不卡国产观看| 蜜芽跳转接口点击进入免费| 极品人妻的娇喘呻吟| 三级片在线播放| 领导让我穿开档内裤上班| 欧美 日产 国产 精品| 欧美裸体xxxx| 老师和学生69xxxx| 高潮喷奶水视频| 在线播放十八禁视频无遮挡| 男人裸体自慰免费看网站| GOGO人体高清人体| 俺也去狠狠色综合电影网| 高h全肉动漫在线观看| 黑人大战白人xxxxx| 白丝制服开裆粉嫩自慰| 51视频在线视频观看| 在线亚洲综合欧美网站首页| 无遮挡h肉动漫在线观看免费资源| 日本熟妇牲交视频| 亚洲色大成网站www网速快| 亚洲avav天堂av在线网| 善良迷人的女教师2中文| 国产第|页草草影院| 国产高清自产拍av在线| http://www.iluminacionvalladolid.com