首頁 >web前端 >css教學 >css中border屬性之製作網頁虛線

css中border屬性之製作網頁虛線

不言
不言原創
2018-06-12 10:47:053197瀏覽

這篇文章主要介紹了css製作網頁中的虛線(border屬性的使用方法),需要的朋友可以參考下

這裡邊框屬性的虛線邊框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邊的邊框虛線屬性,但是這裡留意邊框屬性配置前後順序

#以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

如何使用css transition屬性實作帶有動畫顯隱的微信小程式元件

webpack分離css並單獨打包的方法

以上是css中border屬性之製作網頁虛線的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn