CSS XHTML邊框樣式的寫法總結

2021-09-01 06:10:55 字數 623 閱讀 6686

今天在群（css森林:30247792）裡討論了border的樣式寫法，發現border的寫法還真是靈活，做了一下總結，希望對大家有用： 

border : border-width || border-style || border-color
border是乙個復合的屬性，它可以同時定義上右下左四個邊框，當四個邊都是同個樣式時可以使用，如： 

border:1px solid #ff00ff
這是最簡單的應用，如果四個邊的樣式不是相同的怎辦？一般會有下面幾種情況，寫法差不多： 

/*邊框樣式、寬度、顏色都不同*/


.div1


.div2


/*邊框樣式不同*/


.div1


.div2


/*邊框寬度不同*/


.div1


.div2


/*邊框顏色不同*/


.div1


.div2
還有就是有些邊框是沒有的，比如只有底邊： 

.div1


.div2
注意：如果提供全部四個引數值，將按上－右－下－左的順序作用於四邊。

邊框樣式 背景樣式

1 邊框屬性 屬性說明 border width 邊框的寬度 border style 邊框的外觀 border color 邊框的顏色 border style 屬性值說明 none 無樣式hidden 與 none 相同。bug應用於表除外。對於表，hidden用於解決邊框衝突 solid 實線...

CSS 邊框樣式

簡寫 border color width style 所有的簡寫,一經使用,所有省略的值都會採用預設值 屬性 color,width,style border 方向 屬性 簡寫 border 方向 color width style 四邊圓角 border radius px 或 單邊圓角 bor...

CSS邊框樣式

圓角邊框 border top left radius 40px 左上角 border bottom left radius 40px 左下角 border top right radius 20px 右上角 border bottom right radius 10px 右下角 border bo...