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布局中。
為了對(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
以上實(shí)例對(duì)html中不同標(biāo)簽設(shè)置相同的樣式,包括相同邊框虛線。
6、瀏覽器效果截圖

html不同標(biāo)簽設(shè)置邊框虛線效果截圖
7、在線演示:查看案例
8、DIVCSS5實(shí)例打包下載
立即下載 (1.048KB)
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選