css中的border邊框屬性使用總結

來源:互聯網
上載者:User
初學css的朋友可能覺得 border 屬性只是簡單的繪製邊框。其實, border是控制對象的邊框邊線寬度、顏色、虛線、實線等樣式。可以對單個邊框進行控制,也可以控制所有的邊框。使用border屬性可以製作更多的效果。在 CSS 中,你可以透過 border 的文法來對邊框做許多樣化的設計變化,例如設定邊框的寬度、樣式、顏色等等,也可以隱藏邊框,原則上 CSS 對於 border 的設計不只局限於 p 區塊或 span 的邊框,也可以應用到其他的網頁元素的邊框上,例如網頁標題的邊框、圖片的邊框(img border)... 等,所有的主流瀏覽器都支援 CSS border 屬性。下面就來具體的說明下border邊框屬性的使用。

首先學習php中文網相關的免費課程

1. 學習《html/css快速入門》中的 css邊框樣式 課程

2. 觀看《極客學院CSS及CSS3視頻教程》的 CSS盒子模型-邊框 視頻教程

border邊框屬性

1. 關於CSS之border屬性的詳細介紹

1)border-width:不支持度百分比,支援關鍵字,thin(1px),medium(預設值,3px,預設值是3px的原因是只有當border是3px及以上時,border-style才有效果),thick(5px)

2)border-style:有不同值,下面分析分別為不同值時的應用 a.solid:可以實現三角,梯形;b.dashed:虛線,在chrome/Firefox瀏覽器中,虛線和實線的比例是3:1(稀),在IE瀏覽器中,比例是2:1(密);c.dotted:點線,在chrome/Firefox瀏覽器中,是方點,在IE瀏覽器中,是圓點(可以利用圓點實現圓角效果);d.double:雙線,計算規則,雙線寬度永遠相等,中間間隔+-1,例如,3px=1(內)+1(中間間隔)+1(外),可以實現三道杠圖形;e.inset(內凹),outset(外凸),ridge(溝槽):風格過時,相容性差,沒有什麼使用情境

2. 詳解css樣式之border屬性

border-width 屬性設定邊框的寬度 可能的值:像素

border-style 屬性設定邊框的樣式 可能的值:solid(直線),dashed(虛線),dotted(點線)

border-color 屬性設定邊框的顏色 可能的值:red,#f00,#ff0000,rgb(255,0,0),transparent

border-left 屬性設定左邊框

border-right 屬性設定右邊框

border-top 屬性設定上邊框

border-bottom 屬性設定下邊框

3. 你所不知道的border用法

思路:當底邊和水平線平行時,我們直接通過控制寬高比來實現我們想要的三角形效果;當與水平線不重合時這個時候就比較複雜了,就需要用到寬高比和CSS3中的transform屬性和rotate相結合,讓我們的三角形呈現出我們想要的效果(這裡只是介紹思路,不去具體實現,其中有涉及到數學方面的知識可以自己百度)。

4. 使用CSS的border屬性構建變形邊框的方法總結

border 顧名思義就是邊框的意思,在 CSS 中,你可以透過 border 的文法來對邊框做許多樣化的設計變化,例如設定邊框的寬度、樣式、顏色等等,也可以隱藏邊框,原則上 CSS 對於 border 的設計不只局限於 p 區塊或 span 的邊框,也可以應用到其他的網頁元素的邊框上,例如網頁標題的邊框、圖片的邊框(img border)... 等,所有的主流瀏覽器都支援 CSS border 屬性。

5. border三角形陰影和多重邊框的整理轉述

邊框可以根據方向單獨設定,上下左右,border-top | border-bottom | border-left | border-right ;

所以屬性也可以單獨設定,border-top-width | border-top-style | border-top-color ;

單屬性也可以有組合寫法:

border-width:上 右 下 左;(順時針方向)

border-width:上 左右 下;

border-width:上下 左右 ;

border-width:四個方向;

border-style | border-color也可以這樣設定;

6. CSS:Border屬性

擴充知識 許多設計師一直用的是目前為止在本章列出的知識,然而,有一些方法我們可以進一步擴充!

多個邊 當給一個元素應用多個邊的時候,有各種各樣的技術可以參考。

邊的樣式 solid,dashed和dotted是最常用的border-style屬性值,還有其他幾個我們可以使用的值,包括groove和ridge。

相關問答

1. 關於CSS實現border的0.5px設定?

2. FireFox border樣式異常

3. 關於border-image

4. css3 怎麼實現border-image圓角的問題

【相關推薦】

1. php中文網免費視頻教程:《php.cn獨孤九賤(2)-css視頻教程》

2. php中文網免費視頻教程:CSS視頻教程

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.