亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

border詳解

curried / 2977人閱讀 

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

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

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

了解各種border-style類型

border-style:dashed虛線,在chrome/firefox中,實(shí)點(diǎn)寬高3:1,實(shí)點(diǎn)虛點(diǎn)寬度比例1:1;在IE中,實(shí)點(diǎn)寬高2:1,實(shí)點(diǎn)虛點(diǎn)寬度比例2:1.

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

border-style:double雙線,計(jì)算規(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

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

border-color與color

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

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

border與background-position定位

使用background-position定位

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

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

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

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

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

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

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

border與透明框

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

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

透明邊框的使用案例

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

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

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

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

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

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

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

相關(guān)文章

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

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

    Batkid 評論0 收藏0

  • 詳解css3之border-image

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

    jackzou 評論0 收藏0

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

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

    Codeing_ls 評論0 收藏0

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

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

    mayaohua 評論0 收藏0

發(fā)表評論

0條評論

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