html設定虛線邊框的方法詳細介紹
- 高洛峰原創
- 2017-03-03 16:34:566323瀏覽
用到CSS樣式和HTML標籤元素 為了對html不同標籤加邊框虛線，我們選擇幾個常用標籤對齊設定邊框虛線效果。
1、html常用標籤 p標籤 span ul li table tr td
2、實例用到CSS屬性單字 border width height
3、實現虛線的CSS重點介紹 border為邊框屬性，如果要實
用到CSS樣式和HTML標籤元素
#為了對html不同標籤加邊框虛線，我們選擇幾個常用標籤對齊設定邊框虛線效果。
1、html常用標籤
p標籤
span
ul li
table tr td
2、實例用到CSS屬性單字
border
#width
height
3 、實現虛線的CSS重點介紹
border為邊框屬性，如果要實現物件邊框效果，要設定邊框寬度、邊框顏色、邊框樣式（實線還是虛線）
border:1px dashed #F00 這個就是設定邊框樣式寬度為1px，虛線，虛線為紅色。
4、實例描述
我們對以上幾個標籤設定相同寬度、相同高度、邊框效果。
5、完整HTML程式碼：
<!DOCTYPE html> <html>
<head> <meta charset="utf-8" />
<title>html边框虚线演示 www.pcss5.com</title> <style>
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/
</style> </head>
<body> <p class="bor">p盒子</p>
<span class="bor">span盒子</span> <ul class="bor">
<li>ul li列表</li> <li>ul li列表</li>
</ul> <table class="bor">
<tr> <td>表格</td>
<td>表格2</td> </tr>
<tr> <td>数据</td>
<td>数据2</td> </tr>
</table> </body>
</html>以上實例對html中不同標籤設定相同的樣式，包含相同邊框虛線。
6、瀏覽器效果截圖
#html不同標籤設定邊框虛線效果截圖
更多html設定虛線邊框的方法詳細介紹相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn