邊框屬性信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》前端技術開發知識儲備邊框屬性介紹1邊框樣式設置2邊框粗細設置3邊框顏色設置401邊框屬性介紹前端技術開發01邊框屬性介紹邊框顏色邊框粗細邊框樣式border-colorborder-styleborder-width前端技術開發02邊框樣式設置邊框樣式設置前端技術開發02

邊框樣式屬性下邊框上邊框右邊框左邊框網頁元素有上(top)、右(right)、下(bottom)、左(left)四條邊框。

名稱屬性上邊框樣式屬性border-top-style:樣式取值下邊框樣式屬性border-bottom-style:樣式取值左邊框樣式屬性border-left-style:樣式取值右邊框樣式屬性border-right-style:樣式取值邊框樣式設置前端技術開發02值描述none定義無邊框hidden與none相同。不過應用于表時除外，對于表，hidden用于解決邊框沖突dotted定義點狀邊框。在大多數瀏覽器中呈現為實線dashed定義虛線。在大多數瀏覽器中呈現為實線solid定義實線double定義雙線。雙線的寬度等于border-width的值groove定義3D凹槽邊框。其效果取決于border-color的值ridge定義3D壟狀邊框。其效果取決于border-color的值inset定義3Dinset邊框。其效果取決于border-color的值outset定義3Doutset邊框。其效果取決于border-color的值inherit規定應該從父元素繼承邊框樣式邊框樣式屬性的取值：邊框樣式設置前端技術開發02如何設置標題的左邊框？設置元素的上邊框border-top-style:dashed;border-right-style:double;設置元素的右邊框border-bottom-style:solid;設置標題的下邊框邊框樣式設置前端技術開發02

邊框樣式綜合設置-border-style屬性border-style屬性是一個復合屬性，可以同時取1~4個值。情況一：設置1個值，表示四條邊同時設置。p{border-style:solid;}屬性樣式設置前端技術開發02情況二：設置2個值，其第1個值設置上下邊框，第2個值設置左右邊框border-style:soliddashed;屬性樣式設置前端技術開發02border-style:soliddasheddouble;情況三：設置3個值，第1個值為上邊框，第2個值為左右邊框，第3個值為下邊框1223屬性樣式設置前端技術開發02border-style:soliddasheddoubledotted;情況四：設置4個值，分別按照順時針方向上、右、下、左邊框設置。1234前端技術開發03邊框粗細設置邊框粗細設置前端技術開發02設置邊框粗細屬性：

名稱屬性上邊框粗細屬性border-top-width:關鍵字（thin、medium、thick）|長度下邊框粗細屬性border-bottom-width:關鍵字|長度左邊框粗細屬性border-left-width:關鍵字|長度右邊框粗細屬性border-right-width:關鍵字|長度綜合屬性border-width:關鍵字|長度邊框粗細設置前端技術開發02邊框粗細屬性的實例：網頁源代碼網頁效果04邊框顏色設置04邊框顏色設置

名稱屬性上邊框顏色屬性border-top-color:顏色關鍵字|RGB值下邊框顏色屬性border-bottom-color:顏色關鍵字|RGB值左邊框顏色屬性border-left-color:顏色關鍵字|RGB值右邊框顏色屬性border-right-color:顏色關鍵字|RGB值綜合屬性border-color:顏色關鍵字|RGB值設置邊框顏色屬性：04邊框顏色設置網頁效果網頁源代碼邊框顏色屬性的實例：04邊框綜合設置邊框組合屬性-borderborder屬性可同時設置元素的四條邊框的樣式、粗細、顏色。網頁源代碼網頁效果總結所有網頁元素都有上(top)、右(right)、下(bottom)、左(left)四條邊框。每一條邊框都可以對樣式(style)、寬度(width)和顏色(color)進行樣式控制。bordersytlewidthcolortopborder-top-styleborder-top-widthborder-top-colorbottomborder-bottom-styleborder-bottom-widthborder-bottom-colorleftborder-left-styleborder-left-widthborder-left-colorrightborder-right-styleborder-right-widthborder-right-colo