實作css虛線樣式的兩種方式：dotted和dashed（實例）
- 不言原創
- 2018-07-16 10:23:4811560瀏覽
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虛線樣式二：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虛線樣式border中的dotted和dashed區別：
dashed：來自dash（破折號），由dash 組成的虛線
dotted：來自dot （點），由dot 組成的虛線，也稱點線
上面的演示也能直觀的看出來他們的區別
相關推薦：
以上是實作css虛線樣式的兩種方式：dotted和dashed（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何使用css實作一個圓形頭像框下一篇：如何使用css實作一個圓形頭像框