免費AI編程助手
CSS的9種邊框類型和屬性值
2018-10-09 18:55 更新
CSS邊框類型
在日常生活中，盒子都是由一定材質(zhì)制成的，比如木質(zhì)盒子和紙質(zhì)盒子，在CSS中盒子即邊框也有很多類型，主要有以下9種類型，如下表所示：
為了方便理解，使用Dreamweaver CS6制作實例：
1、新建HTML文件，設(shè)置標題為“邊框?qū)嵗?/p>
2、在body標簽中輸入如下代碼：
注意：加入color屬性和br標簽可以更方便地查看到每種類型邊框的實際效果。
運行結(jié)果如下圖所示：
屬性值的簡寫樣式
在border中有三種屬性，分別是寬度、樣式、顏色，并且有四個“面”，分別是border-right，border-bottom，border-left。根據(jù)實際需要我們可以可以給這四個“面”同時制定或分別制定、制定其中的一個或幾個樣式。假如我們要給4個邊框都制定同樣樣式，每個屬性都寫一行代碼，需要寫12行，這樣一來就顯得很麻煩，在實際中CSS提供了簡寫方式，減少不必要的代碼書寫。
（1）所有的邊框使用同一樣式，代碼如下所示：
Border:2px red solid; /*設(shè)置邊框的樣式*/
這行代碼設(shè)置四個邊框的寬度為2px，顏色為紅色，顏色為實線。
（2）對不同邊框設(shè)置不同的屬性值，代碼如下所示：
從這三行代碼可以知道，4個邊框?qū)傩栽O(shè)置，可以指定2、3或4個屬性值，它們有各自不同的意義。
2個指定值意義：第一個值為上下邊框?qū)傩再x值，第二個值為左右邊框?qū)傩再x值。
3個指定值的意義：第一個值為上邊框?qū)傩再x值，第二個值為左右邊框?qū)傩再x值，第三個值為下邊框?qū)傩再x值。
4個指定值的意義：第一值為上邊框?qū)傩再x值，第二個值為右邊框?qū)傩再x值，第三個值為下邊框?qū)傩再x值，第四個值為左邊框賦值。
那么上述代碼的意思就是為上下邊框顏色設(shè)為紅色，左右邊框顏色設(shè)為藍色；上下框?qū)挾仍O(shè)為2px；左右邊框設(shè)為3px；下邊框設(shè)為4px；上邊框樣為點線式，右邊框為破折線式，下邊框為實線式，左邊框為雙線式。運行效果如下圖所示：
（3）為某一邊框設(shè)不同值。
也可以在設(shè)定統(tǒng)一值后，再為其中一個邊框設(shè)定不同的值，代碼如下：
根據(jù)CSS的代碼執(zhí)行順序，可以知道，第一行設(shè)定的border-top的效果將被第二行設(shè)定的效果取代。
邊框與背景
在邊框中還有需要注意的地方，就是邊框與背景顏色同時出現(xiàn)的情況下，在不同瀏覽器中瀏覽可能會有細微差別。比如在IE中，邊框不顯示背景顏色，而在Firefox中，邊框也能被背景顏色填充。
以上內(nèi)容是否對您有幫助：
更多建議：