close

CSS--邊框設置:border

border: 1px solid red(圖元 樣式 顏色 ),border-bottom:1px dotted #ccc


盒模型--邊框(一)
盒子模型的邊框就是圍繞著內容及補白的線,這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。

如下面代碼為div來設置邊框粗細為2px、樣式為實心的、顏色為紅色的邊框:

div{
    border:2px  solid  red;
}
上面是border代碼的縮寫形式,可以分開寫:

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
注意:

1、border-style(邊框樣式)常見樣式有:

dashed(虛線)| dotted(點線)| solid(實線)。


2、border-color(邊框顏色)中的顏色可設置為十六進位顏色,如:

border-color:#888;//前面的井號不要忘掉。

3、border-width(邊框寬度)中的寬度也可以設置為:

thin | medium | thick(但不是很常用),最常還是用象素(px)。

盒模型--邊框(二)
現在有一個問題,如果有想為p標籤單獨設置下邊框,而其它三邊都不設置邊框樣式怎麼辦呢?css樣式中允許只為一個方向的邊框設置樣式:

div{border-bottom:1px solid red;}
同樣可以使用下面代碼實現其它三邊上、右、左邊框的設置:

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;
————————————————
版權聲明:本文為CSDN博主「絕地反擊T」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本聲明。
原文連結:https://blog.csdn.net/u012110719/article/details/41967333

 

arrow
arrow

    Johnson峰 發表在 痞客邦 留言(0) 人氣()