CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)
發(fā)布時間:2012-03-28 14:17:14 作者:佚名
我要評論

border-radius:用這個屬性能實現(xiàn)圓角邊框的效果?,F(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。
-webkit-border-radius:蘋果;谷歌,等一些瀏覽器認,因為他們都用的是webkit內核;
-moz-border-radius:moz這個屬性 主要是專門支持Mozilla Firefox 火狐瀏覽器的CSS屬性。
在這兩個屬性有值的時候,去掉哪個屬性,對用他們做內核的瀏覽器就有影響,如果沒值的話,就沒影響,這兩個屬性和,IE,和360沒關系。不刪除的話影響微乎其微.
border-radius:用這個屬性能實現(xiàn)圓角邊框的效果。
現(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。請看下面的示例代碼:
復制代碼
代碼如下:<div style="background-color:#ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #000;
padding:10px;"
>
Mozilla/Firefox 和 Safari 3用戶將在這里看到圓角邊框
此外,設計者還可以隨意指定圓角的位置,左上、左下、右上、右下四個方向。在mozilla/firefox和safari中的具體書寫格式如下:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Mozilla/Firefox 和Safari 3 中看到的左上圓角
Mozilla/Firefox 和Safari 3 中看到的右上圓角
Mozilla/Firefox 和Safari 3 中看到的左下圓角
Mozilla/Firefox 和Safari 3 中看到的右下圓角
CSS3中border-radius隱藏的威力
這篇文章將簡述使用CSS3的border-radius來畫圓、半圓和四分之一圓,并如何利用它們。
如何使用border-radius屬性
下面是border-radius屬性最基本的使用方法。
復制代碼
代碼如下:.round {
border-radius: 5px; /* 所有角都使用半徑為5px的圓角,此屬性為CSS3標準屬性 */
-moz-border-radius: 5px; /* Mozilla瀏覽器的私有屬性 */
-webkit-border-radius: 5px; /* Webkit瀏覽器的私有屬性 */
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角 */
}
關于在IE里怎么實現(xiàn)圓角,可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》這篇文章。
1.用border-radius畫圓
實心圓
如圖,是用border-radius屬性畫出來的一個完美的實心圓。畫實心圓的方法是高度和寬度相等,并且把border的寬度設為高度和寬度的一半。代碼如下。
復制代碼
代碼如下:#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
}
空心圓
通過border-radius屬性畫空心圓和畫實心圓的方法差不多,只是border的寬度只能小于高度和寬度的一半。代碼如下。
復制代碼
代碼如下:#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
}
虛線圓
復制代碼
代碼如下:#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
}
相關文章
CSS3 border-radius(圓角)效果在線調試工具
這是一款可在線調試并預覽CSS3 border-radius(圓角)效果的工具。右側具有實時調試并顯示預覽效果的功能,同時能夠實時生成對應的css3效果代碼,方便需要的朋友使用。2016-05-31- 這篇文章主要介紹了CSS3中border-radius屬性設定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設置弧度來制作其他弧線邊框圖形,需要的朋友2016-05-10
- 這篇文章主要介紹了CSS3使用border-radius屬性制作圓角,并附上示例代碼,推薦給有相同需求的小伙伴。2014-12-22
IE系列不支持CSS的圓角border-radius等屬性的解決方案
IE系列瀏覽器不支持CSS的圓角(border-radius)等CSS3屬性,如何解決這個問題呢?百度了一下,發(fā)現(xiàn)有個開源的插件可以解決此問題2014-09-15實現(xiàn)CSS3中的border-radius(邊框圓角)示例代碼
本文為大家詳細介紹下如何實現(xiàn)CSS3中的border-radius(圓角),具體代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-19- 前面系統(tǒng)總結了CSS3中Gradient和RGBA的用法,今天我們在一起來看看CSS3中制作圓角的屬性border-radius的具體用法;在CSS2中,大家都碰到過圓角的制作,如今CSS3中的border-ra2012-12-24
CSS3 border-radius圓角的實現(xiàn)方法及用法詳解
這篇文章主要介紹了CSS3 border-radius圓角的實現(xiàn)方法及用法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-14