實作css虛線樣式的兩種方式：dotted和dashed（實例）-css教學-PHP中文網

實作css虛線樣式的兩種方式：dotted和dashed（實例）

不言

發布： 2018-07-16 10:23:48

原創

11499 人瀏覽過

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（實例）