国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

border詳解

curried / 2910人閱讀 

border屬性指定了盒的border區(qū)的width，color和style。這些屬性適用于所有元素
border-width與百分比

border-width不支持百分比:不符合語義,邊框不會因設(shè)備大小而變化

border-width默認(rèn)是medium:3px,因為border-style:double至少3px才有效果

了解各種border-style類型

border-style:dashed虛線,在chrome/firefox中,實點寬高3:1,實點虛點寬度比例1:1;在IE中,實點寬高2:1,實點虛點寬度比例2:1.

border-style:dotted點線,在chrome/firefox中,點線是小方塊;在IE中,點線是小圓點.

border-style:double雙線,計算規(guī)則是,雙線寬度永遠(yuǎn)相等,中間間隔±1.

1px:0+1+0
2px:1+0+1
3px:1+1+1
4px:1+2+1
5px:2+1+2
6px:2+2+2
7px:2+3+2

使用雙線實現(xiàn)三道杠效果

border-color與color

沒有指定border-color的時候,color會作為默認(rèn)的border-color

可以利用這個特性,來實現(xiàn)上傳按鈕變色功能,比以往的代碼要減少很多

border與background-position定位

使用background-position定位

background-position定位只能相對于左上角,不能相對于右下角,為了實現(xiàn)右下角的定位,我們可以配合border使用,因為100%右側(cè)定位不計算border區(qū)域

這里需要注意的是,div設(shè)置了寬高,background-image才起作用

border與三角等圖形構(gòu)建

利用border實現(xiàn)三角,梯形以及模擬圓角

當(dāng)width和height都為0時,border如果果有一定寬度,可以實現(xiàn)由4個等邊三角形組成的正方形,width和height變大后,會逐漸演變成4個梯形

利用這種特性,可以通過兩個border和一個矩形模擬圓角矩形

此外還可以利用在下拉菜單,聊天框等有三角形狀的地方

border與透明框

border-color:transparent始于IE7,兼容性很好,因此我們可以通過透明框做很多事情

比方說前面的圖片右側(cè)固定定位以及各種圖形的實現(xiàn)

透明邊框的使用案例

第一個例子是在checkbox中使用透明框擴(kuò)大渲染區(qū)域

第二個例子是filter:drop-shadow(20px 0 #ff0000)配合透明框?qū)崿F(xiàn)渲染區(qū)域擴(kuò)大,圖標(biāo)變色

border在布局中的應(yīng)用

使用border實現(xiàn)兩欄等高布局

使用border的好處是因為margin和padding使用很大的負(fù)值實現(xiàn),所以如果負(fù)值元素有錨點定位則會飛出去,而使用border則沒有這種問題,缺點是不支持百分比寬度

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111918.html

相關(guān)文章

  • border-sizing屬性詳解和應(yīng)用

    摘要：用于更改用于計算元素寬度和高度的默認(rèn)的盒子模型。它有和三種取值。和屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據(jù)項目中的使用經(jīng)驗和的建議，推薦將屬性設(shè)置為。個人網(wǎng)站原文鏈接屬性詳解和應(yīng)用 box-sizing用于更改用于計算元素寬度和高度的默認(rèn)的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inheri...

    Batkid 評論0 收藏0

  • 詳解css3之border-image

    摘要：屬性用來指定邊框所需素材的路徑，語法可以參照。當(dāng)圖片碰到邊界時，如果超過則被截斷。圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個邊框。如下圖后續(xù)是屬性所以存在兼容性問題，需要在屬性前面設(shè)置等 border-image簡介 css3中新增了一個屬性border-image，這個屬性允許開發(fā)者使用圖片來定義邊框,擴(kuò)充了 CSS2 中僅有的幾個預(yù)定義邊框樣式(border-...

    jackzou 評論0 收藏0

  • 【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

    摘要：僅僅使用作為身體的布局，用的各種和圓角屬性來繪制各部位的形狀，當(dāng)然也不會使用任何圖片哦。有的同學(xué)說，用不是能畫得更逼真而且更簡單嗎這點我也非常贊同，但我的理由還是，那就沒意思了。這次寫的詳細(xì)一點，把各個部位都拆出來分析。收工歡迎大家吐槽 僅僅使用div作為身體的布局，用css3的各種transform和圓角屬性來繪制各部位的形狀，當(dāng)然也不會使用任何圖片哦。那就沒意思了。有的同學(xué)說，用c...

    Codeing_ls 評論0 收藏0

  • 【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

    摘要：僅僅使用作為身體的布局，用的各種和圓角屬性來繪制各部位的形狀，當(dāng)然也不會使用任何圖片哦。有的同學(xué)說，用不是能畫得更逼真而且更簡單嗎這點我也非常贊同，但我的理由還是，那就沒意思了。這次寫的詳細(xì)一點，把各個部位都拆出來分析。收工歡迎大家吐槽 僅僅使用div作為身體的布局，用css3的各種transform和圓角屬性來繪制各部位的形狀，當(dāng)然也不會使用任何圖片哦。那就沒意思了。有的同學(xué)說，用c...

    mayaohua 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<