常見的CSS 虛線實例教學-css教學-PHP中文網

首頁

web前端

css教學

常見的CSS 虛線實例教學

零下一度

Jun 16, 2017 pm 01:53 PM

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代碼：

我的四邊為黑色虛線邊框

這裡設定邊框縮寫方式定義divcss5選擇器四邊邊框為1px的黑色虛線邊框

二、左邊為虛線：
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程式碼：

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

這裡通過先設置了該它三邊為黑色虛線邊框實例

這裡通過先設置了該通過先設置了該物件四邊為黑色1px虛線邊框，緊接著又設置一邊邊線為0的設置，這樣相當於設置了3邊的邊框虛線屬性，但是這裡注意邊框屬性設置前後順序。

以上實例完整DIV+CSS程式碼如下：

<!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>

登入後複製

2、超連結虛線下劃線

我們常常會設定被連結的文字內容要么有連結有虛線的底線，或滑鼠移動到有連結的文字上出現虛線下劃線，這個怎麼實現的呢，這裡為大家介紹關於CSS超連結的虛線下劃線。

一、帶連結文字有虛線下劃線

這裡也是透過CSS border邊框屬性來控制超連結a物件的CSS樣式。

示範CSS程式碼：
a{ border-bottom:1px dashed #111;}/* 這裡設定帶連結文字下方出現虛線下劃線*/

a:hover{ border:0;} /* 這裡設定滑鼠經過被連結文字時不出現虛線*/

完整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>

登入後複製

說明：text-decoration:none;這個是去掉CSS 底線（超連結預設自帶的底線屬性）###

以上是常見的CSS 虛線實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。