首頁 > web前端 > css教學 > 實作css虛線樣式的兩種方式:dotted和dashed(實例)

實作css虛線樣式的兩種方式:dotted和dashed(實例)

不言
發布: 2018-07-16 10:23:48
原創
11548 人瀏覽過

css虛線邊框怎麼做? html虛線邊框設定一般會想到border的solid,html網頁佈局中solid用的機率最高了,要有css虛線的效果還可以用圖片做背景,但是不推薦,盡量使用css虛線樣式做這個虛線的效果, 那麼css虛線樣式就是border中的dotted和dashed,這兩種都是css虛線,但是他們是有差別的,請看下面css虛線邊框程式碼實例用法示範。

css虛線樣式實作方式一:dotted虛線

#
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div class="box">大家好,我是dotted虚线!</div>
</body>
</html>
登入後複製

dotted虛線顯示效果:

實作css虛線樣式的兩種方式:dotted和dashed(實例)

css虛線樣式二:dashed虛線

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div class="box">大家好,我是dashed虚线!</div>
</body>
</html>
登入後複製

dashed虛線顯示效果:

實作css虛線樣式的兩種方式:dotted和dashed(實例)

css虛線樣式border中的dotted和dashed區別:

dashed:來自dash(破折號),由dash 組成的虛線 

dotted:來自dot (點),由dot 組成的虛線,也稱點線 

上面的演示也能直觀的看出來他們的區別

相關推薦:

##常見的CSS 虛線實例教學

怎麼用css寫虛線邊框

以上是實作css虛線樣式的兩種方式:dotted和dashed(實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板