DIV CSS虛線教學篇包括講解常出現的各種樣式的DIV虛線案例CSS教學。
本節為大家介紹常見的CSS 虛線及DIV教學。 CSS虛線下劃線、列表虛線統統搞定。
1、CSS邊框虛線
這裡透過邊框屬性的虛線邊框border控制虛線。以下設定的css 高度(css height)和css 寬度(css width)為350像素是為了便於觀看演示 其它意思。
一、四邊為虛線邊框
border:1px dashed #000; 黑色虛線邊框
實例:
CSS程式碼: .divcss5{border:1px dashed #000; height :50px;width:350px}
Html代碼:
二、左邊為虛線:
CSS代碼: .divcss5-1{border-left:1px dashed #000; height:50px;width:350px }
Html程式碼:
三、右邊為虛線:
CSS程式碼: .divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html程式碼:
四、頂部邊(上邊)為虛線:
CSS程式碼: .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html程式碼:
五、底部邊(下邊)為虛線:
CSS代碼: .divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代碼:
六、任一邊不為虛線,其它三邊為虛線情況
加入右邊邊框不為虛線而沒有邊線,其它三邊為黑色虛線邊框
CSS代碼: .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width :350px}
Html程式碼:
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>CSS 虚线 DIVCSS5实例说明<title>www.php.cn</title> <style> .divcss5{ border:1px dashed #000; height:50px; width:350px} .divcss5-1{border-left:1px dashed #000; height:50px;width:350px} .divcss5-2{border-right:1px dashed #000; height:50px;width:350px} .divcss5-3{border-top:1px dashed #000; height:50px;width:350px} .divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px} .divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px} /* www.divcss5.com实例 */ </style> </head> <body> www.divcss5.com css虚线实例实例<br> <div class="divcss5">我四边为虚线边框</div><br> <div class="divcss5-1">我的左边为黑色虚线边框</div><br> <div class="divcss5-2">我的右边为黑色虚线边框</div><br> <div class="divcss5-3">我的上边为黑色虚线边框</div><br> <div class="divcss5-4">我的下边为黑色虚线边框</div><br> <div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div> </body> </html>
一、帶連結文字有虛線下劃線
示範CSS程式碼:
a{ border-bottom:1px dashed #111;}/* 這裡設定帶連結文字下方出現虛線下劃線*/
完整DIV CSS程式碼:
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>CSS 虚线下划线 DIVCSS5实例说明</title><style>a{ border-bottom:1px dashed #111;text-decoration:none;}a:hover{ border:0;}</style></head> <body>欢迎到<a href="www.php.cn">CSS教程网</a>的www.php.cn- divcss5学习CSS</body></html>
以上是常見的CSS 虛線實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!