首頁技術文章正文

border-style屬性設置邊框樣式【案例演示】

更新時間:2022-08-09 來源:黑馬程序員 瀏覽量:

IT培訓班

在CSS屬性中,border-style屬性用于設置邊框樣式。其基本語法格式如下:

border-style: 上邊 [右邊下邊 左邊];

在設置邊框樣式時既可以對四邊分別設置,也可以綜合設置四邊的樣式。border-style的常用屬性值有4個,分別用于定義不同的顯示樣式,具體介紹如下。

?solid:邊框為單實線。

?dashed:邊框為虛線。

?dotted:邊框為點線。

?double:邊框為雙實線。

使用border-style屬性綜合設置四邊樣式時,必須按上右下左的順時針順序,省略時采用值復制的原則,即一個值為四邊,兩個值為上下和左右,三個值為上、左右、下,四個值為上、右、下、左。

例如,<p>只有上邊為虛線(dashed),其他三邊為單實線(solid),可以使用(border-style)綜合屬性分別設置各邊樣式:

{borer-style: dashed solid solid solid;}    /*四個值為上、右、下、左*/

也可以簡寫為

P{borer-style: dashed solid solid;}       /*三個值為上、左右、下?/

以下所示即為不同邊框樣式的盒子:

   文本的邊框樣式為單實線


   文本的邊框樣式是上下為點線、左右邊框為單實線


   文本的邊框樣式是上為點線、左右下邊框為單實線


   文本的邊框樣式是上下為點線、左右邊框為單實線

分享到:
在線咨詢 我要報名
和我們在線交談!