導讀:CSS/HTMLCSS/HTML很多css初學者 在前端開發過程中，經常會用到css虛線樣式，但是 不知道css虛線樣式該如何實現，比如一個css這樣寫：border-style:dotted網站seo優化診斷工具公司網站建設。

很多css初學者 在前端開發過程中，經常會用到css虛線樣式，但是 不知道css虛線樣式該如何實現，比如一個css這樣寫：border-style:dotted solid double dashed;出來的框就是：上邊框是點狀，右邊框是實線，下邊框是雙線，左邊框是虛線，如果一個css這樣寫：border-bottom:1px dashed #000000;出來的框就是一條寬度為1像素的黑色下劃虛線css關于線的類型還真是挺多的，其中新手們比較關注的還是虛線的實現方法。 css虛線實現方法 定義和用法： […]

很多css初學者在前端開發過程中，經常會用到css虛線樣式，但是不知道css虛線樣式該如何實現，比如一個css這樣寫：border-style:dotted solid double dashed; 出來的框就是：上邊框是點狀，右邊框是實線，下邊框是雙線，左邊框網站建設哪家好是虛線，如果一個css這樣寫：border-bottom:1px dashed #000000;出來的框就是一條寬度為1像素的黑色下劃虛線···css關于“線”的類型還真是挺多的，其中新手們比較關注的還是“虛線的實現方法”。

 

css虛線實現方法

定義和用法： border-style 屬性用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。只有當這個值不是none時邊框才可能出現。   這里邊框屬性的虛線邊框border控制虛線。以下配置的css 高度(css height)和css 寬度(css width)為350像素。   1、四邊為虛線邊框 border:1px dashed #000; 黑色虛線邊框   實例： CSS代碼： .hackhome{border:1px dashed #000; height:50px;width:350px} Html代碼： <div class="hackhome">我的四邊為黑色虛線邊框</div> 這里配置邊框縮寫形式解釋hackhome挑選器四邊邊框為1px的黑色虛線邊框   2、左邊為虛線： CSS代碼： .hackhome-1{border-left:1px dashed #000; height:50px;width:350px} Html代碼： <div class="hackhome-1">我的左邊為黑色虛線邊框</div> 這里配置了左邊一邊為黑色虛線邊框   3、右邊為虛線： CSS代碼： .hackhome-2{border-right:1px dashed #000; height:50px;width:350px} Html代碼： <div class="hackhome-2">我的右邊為黑色虛線邊框</div> 這里配置了右邊一邊為黑色虛線邊框   4、頂部邊(上邊)為虛線： CSS代碼： .hackhome-3{border-top:1px dashed #000; height:50px;width:350px} Html代碼：<div class="hackhome-3">我的上邊為黑色虛線邊框</div> 這里配置了頂邊(上邊線)一邊為黑色虛線邊框 5、底部邊(下邊)為虛線： CSS代碼： .hackhome-4{border-bottom:1px dashed #000; height:50px;width:350px} Html代碼：<div class="hackhome-4">我的下邊為黑色虛線邊框</div> 這里配置了底邊(下邊線)一邊為黑色虛線邊框 6、隨意一邊不為虛線，其它三邊為虛線狀況 參與右邊邊框不為虛線而沒有邊線，其它三邊為黑色虛線邊框 CSS代碼： .hackhome-5{border:1px dashed #000;border-right:0; height:50px;width:350px} Html代碼：<div class="hackhome-5">我的右邊邊框無邊線而其它三邊為黑色虛線邊框實例</div> 這里先配置了該對象四邊為黑色1px虛線邊框，緊接著又配置一邊邊線為0的配置，這樣相當于配置了3邊的邊框虛線屬性，但是這里留意邊框屬性配置前后順序  

關鍵詞標簽: 應用實例 虛線