html 邊框虛線

2020-03-24 17:40:41

字體：大中小

供稿：網(wǎng)友

html 邊框虛線實(shí)現(xiàn)通過(guò)CSS實(shí)現(xiàn)不同對(duì)象虛線邊框樣式

在HTML可以對(duì)大部分標(biāo)簽加邊框或虛線邊框，接下來(lái)DIVCSS5會(huì)對(duì)幾個(gè)不同標(biāo)簽加虛線邊框效果樣式，大家可以根據(jù)演示擴(kuò)展靈活掌握與應(yīng)用到自己DIV+CSS布局中。

一、用到CSS樣式和HTML標(biāo)簽元素 - TOP

為了對(duì)html不同標(biāo)簽加邊框虛線，我們選擇幾個(gè)常用標(biāo)簽對(duì)齊設(shè)置邊框虛線效果。

1、html常用標(biāo)簽
div標(biāo)簽
span
ul li
table tr td

2、實(shí)例用到CSS屬性單詞
border
width
height

3、實(shí)現(xiàn)虛線的CSS重點(diǎn)介紹
border為邊框?qū)傩?，如果要?shí)現(xiàn)對(duì)象邊框效果，要設(shè)置邊框?qū)挾取⑦吙蝾伾?、邊框樣式（?shí)線還是虛線）
border:1px dashed #F00 這個(gè)就是設(shè)置邊框樣式寬度為1px，虛線，虛線為紅色。

4、實(shí)例描述
我們對(duì)以上幾個(gè)標(biāo)簽設(shè)置相同寬度、相同高度、邊框效果。

5、完整HTML代碼：

<!DOCTYPEhtml
<html
<head
<metacharset="utf-8"/
<titlehtml邊框虛線演示www.divcss5.com</title
<style
.bor{border:1pxdashed#F00;width:300px;height:60px;margin-top:10px}
span{display:block}/*css注釋說(shuō)明：讓span形成塊*/
</style
</head
<body
<divclass="bor"div盒子</div
<spanclass="bor"span盒子</span
<ulclass="bor"
<liulli列表</li
<liulli列表</li
</ul
<tableclass="bor"
<tr
<td表格</td
<td表格2</td
</tr
<tr
<td數(shù)據(jù)</td
<td數(shù)據(jù)2</td
</tr
</table
</body
</html