CSS的虛線樣式怎麼實現
- php中世界最好的语言原創
- 2017-12-01 11:43:123097瀏覽
說到CSS的虛線樣式，那麼我們會聯想到border的solid，在網頁的佈局裡solid用的機率應該是最高的了，但大家知道還有dotted虛線和ashed虛線嗎？今天來跟大家介紹這兩個種屬性做出虛線的方法。
講到css虛線樣式，應該會想到border的solid，網頁佈局中solid用的機率最高了，要有css虛線的效果還可以用圖片做背，但是不推薦，盡量使用css虛線樣式做這個虛線的效果，那麼css虛線樣式就是border中的dotted和dashed，這兩種都是css虛線，但是他們是有區別的。
1.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>大家好，我是dotted虚线！</div>
</body>
</html>2.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>大家好，我是dashed虚线！</div>
</body>
</html>相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是CSS的虛線樣式怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn