欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS圓角效果 -webkit-border-radius(CSS3中border-radius隱藏的威力)

  發(fā)布時(shí)間：2012-03-28 14:17:14   作者：佚名   我要評(píng)論
border-radius：用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果?，F(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。

-webkit-border-radius：蘋果；谷歌，等一些瀏覽器認(rèn)，因?yàn)樗麄兌加玫氖莣ebkit內(nèi)核；
-moz-border-radius：moz這個(gè)屬性 主要是專門支持Mozilla Firefox 火狐瀏覽器的CSS屬性。
在這兩個(gè)屬性有值的時(shí)候，去掉哪個(gè)屬性，對(duì)用他們做內(nèi)核的瀏覽器就有影響，如果沒(méi)值的話，就沒(méi)影響，這兩個(gè)屬性和，IE，和360沒(méi)關(guān)系。不刪除的話影響微乎其微.

border-radius：用這個(gè)屬性能實(shí)現(xiàn)圓角邊框的效果。
現(xiàn)在只有Mozilla/Firefox 和 Safari 3支持該屬性。請(qǐng)看下面的示例代碼：

復(fù)制代碼
代碼如下:

<div style="background-color:#ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #000;
padding:10px;"
>

Mozilla/Firefox 和 Safari 3用戶將在這里看到圓角邊框
此外，設(shè)計(jì)者還可以隨意指定圓角的位置，左上、左下、右上、右下四個(gè)方向。在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隱藏的威力

這篇文章將簡(jiǎn)述使用CSS3的border-radius來(lái)畫圓、半圓和四分之一圓，并如何利用它們。
如何使用border-radius屬性
下面是border-radius屬性最基本的使用方法。


復(fù)制代碼
代碼如下:

.round {
border-radius: 5px; /* 所有角都使用半徑為5px的圓角，此屬性為CSS3標(biāo)準(zhǔn)屬性 */
-moz-border-radius: 5px; /* Mozilla瀏覽器的私有屬性 */
-webkit-border-radius: 5px; /* Webkit瀏覽器的私有屬性 */
border-radius: 5px 4px 3px 2px; /* 四個(gè)半徑值分別是左上角、右上角、右下角和左下角 */
}

關(guān)于在IE里怎么實(shí)現(xiàn)圓角，可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》這篇文章。

1.用border-radius畫圓
實(shí)心圓

如圖，是用border-radius屬性畫出來(lái)的一個(gè)完美的實(shí)心圓。畫實(shí)心圓的方法是高度和寬度相等，并且把border的寬度設(shè)為高度和寬度的一半。代碼如下。

復(fù)制代碼
代碼如下:

#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
}

空心圓

通過(guò)border-radius屬性畫空心圓和畫實(shí)心圓的方法差不多，只是border的寬度只能小于高度和寬度的一半。代碼如下。

復(fù)制代碼
代碼如下:

#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
}

虛線圓


復(fù)制代碼
代碼如下:

#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
}

相關(guān)文章

  • CSS3 border-radius(圓角)效果在線調(diào)試工具

    這是一款可在線調(diào)試并預(yù)覽CSS3 border-radius(圓角)效果的工具。右側(cè)具有實(shí)時(shí)調(diào)試并顯示預(yù)覽效果的功能，同時(shí)能夠?qū)崟r(shí)生成對(duì)應(yīng)的css3效果代碼，方便需要的朋友使用。
    2016-05-31

  • CSS3中border-radius屬性設(shè)定圓角的使用技巧

    這篇文章主要介紹了CSS3中border-radius屬性設(shè)定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設(shè)置弧度來(lái)制作其他弧線邊框圖形,需要的朋友
    2016-05-10

  • CSS3使用border-radius屬性制作圓角

    這篇文章主要介紹了CSS3使用border-radius屬性制作圓角，并附上示例代碼，推薦給有相同需求的小伙伴。
    2014-12-22

  • IE系列不支持CSS的圓角border-radius等屬性的解決方案

    IE系列瀏覽器不支持CSS的圓角(border-radius)等CSS3屬性，如何解決這個(gè)問(wèn)題呢？百度了一下，發(fā)現(xiàn)有個(gè)開源的插件可以解決此問(wèn)題
    2014-09-15

  • 實(shí)現(xiàn)CSS3中的border-radius(邊框圓角)示例代碼

    本文為大家詳細(xì)介紹下如何實(shí)現(xiàn)CSS3中的border-radius(圓角)，具體代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
    2013-07-19

  • CSS3的Border-radius輕松制作圓角

    前面系統(tǒng)總結(jié)了CSS3中Gradient和RGBA的用法，今天我們?cè)谝黄饋?lái)看看CSS3中制作圓角的屬性border-radius的具體用法;在CSS2中，大家都碰到過(guò)圓角的制作,如今CSS3中的border-ra
    2012-12-24

  • CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法詳解

    這篇文章主要介紹了CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-14

最新評(píng)論