萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS制作網頁中的虛線

CSS制作網頁中的虛線

   這裡議決邊框屬性的虛線邊框border控制虛線。以下配置的css 高度(css height)和css 寬度(css width)為350像素是為了便於觀看演示 其它意思。

  一、四邊為虛線邊框

  border:1px dashed #000; 黑色虛線邊框

  實例:

  CSS代碼: .hackhome{border:1px dashed #000; height:50px;width:350px}

  Html代碼: 我的四邊為黑色虛線邊框

  這裡配置邊框縮寫形式解釋hackhome挑選器四邊邊框為1px的黑色虛線邊框

  二、左邊為虛線:

  CSS代碼: .hackhome-1{border-left:1px dashed #000; height:50px;width:350px}

  Html代碼: 我的左邊為黑色虛線邊框

  這裡配置了左邊一邊為黑色虛線邊框

  三、右邊為虛線:

  CSS代碼: .hackhome-2{border-right:1px dashed #000; height:50px;width:350px}

  Html代碼: 我的右邊為黑色虛線邊框

  這裡配置了右邊一邊為黑色虛線邊框

  四、頂部邊(上邊)為虛線:

  CSS代碼: .hackhome-3{border-top:1px dashed #000; height:50px;width:350px}

  Html代碼: 我的上邊為黑色虛線邊框

  這裡配置了頂邊(上邊線)一邊為黑色虛線邊框

  五、底部邊(下邊)為虛線:

  CSS代碼: .hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px}

  Html代碼: 我的下邊為黑色虛線邊框

  這裡配置了底邊(下邊線)一邊為黑色虛線邊框

  六、隨意一邊不為虛線,其它三邊為虛線狀況

  參與右邊邊框不為虛線而沒有邊線,其它三邊為黑色虛線邊框

  CSS代碼: .hackhome-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

  Html代碼: 我的右邊邊框無邊線而其它三邊為黑色虛線邊框實例

  這裡議決先配置了該對象四邊為黑色1px虛線邊框,緊接著又配置一邊邊線為0的配置,這樣相當於配置了3邊的邊框虛線屬性,但是這裡留意邊框屬性配置前後順序。

copyright © 萬盛學電腦網 all rights reserved