範文齋

css製作網頁中的虛線

這裏邊框屬性的虛線邊框border控制虛線。以下配置的css 高度(css height)和css 寬度(css width)爲350像素。

css製作網頁中的虛線

一、四邊爲虛線邊框

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

實例:

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

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

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

二、左邊爲虛線:

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

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

這裏配置了左邊一邊爲黑色虛線邊框

三、右邊爲虛線:

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

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

這裏配置了右邊一邊爲黑色虛線邊框

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

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

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

這裏配置了頂邊(上邊線)一邊爲黑色虛線邊框

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

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

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

這裏配置了底邊(下邊線)一邊爲黑色虛線邊框

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

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

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

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

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

標籤:css 虛線 網頁