html 邊框虛線的實作步驟
- php中世界最好的语言原創
- 2017-12-02 10:21:375765瀏覽
在HTML裡可以對大部分的標籤增加邊框或虛線邊框，那麼這次我們就給幾個不同的標籤加虛線邊框效果樣式，我們可以根據以下案例來靈活掌握和應用虛線邊框這個概念。
html常用標籤
div标签 span ul li table tr td
實例用到CSS屬性單字
border width height
實作虛線的CSS重點介紹
border為邊框屬性，如果要實現物件邊框效果，要設定邊框寬度、邊框顏色、邊框樣式（實線還是虛線）
border:1px dashed #F00 這個就是設定邊框樣式寬度為1px，虛線，虛線為紅色。
實例描述
我們對以上幾個標籤設定相同寬度、相同高度、邊框效果。
完整HTML程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html边框虚线演示</title>
<style>
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px}
span{display:block}/*css注释说明：让span形成块*/
</style>
</head>
<body>
<div class="bor">div盒子</div>
<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中不同標籤設定相同的樣式，包含相同邊框虛線。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是html 邊框虛線的實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn