習HTML時有時候我們需要用代碼設置邊框或虛線邊框的樣式，那該怎么設置呢？下面上海非凡進修學院HTML5開發培訓機構大咖分享下html虛線邊框設置教程，會對幾個不同標簽加虛線邊框效果樣式，同學們可以根據示例靈活掌握與應用到自己DIV+CSS布局中。

為了對html不同標簽加邊框虛線，我們選擇幾個常用標簽對齊設置邊框虛線效果。

1、html常用標簽

div標簽

span

ul li

table tr td

2、實例用到CSS屬性單詞

border

width

height

3、實現虛線的CSS重點介紹

border為邊框屬性，如果要實現對象邊框效果，要設置邊框寬度、邊框顏色、邊框樣式（實線還是虛線）

border:1px dashed #F00 這個就是設置邊框樣式寬度為1px，虛線，虛線為紅色。

4、實例描述

我們對以上幾個標簽設置相同寬度、相同高度、邊框效果。

5、HTML代碼示例：

以上示例對html中不同標簽設置相同的樣式，包括相同邊框虛線。

上海HTML5開發培訓機構大咖提示邊框三個樣式

通常我們可以對邊框設置寬度（厚度）、邊框樣式、邊框顏色這三個屬性與參數。

1）、邊框顏色：border-color:#000

2）、邊框厚度（寬度）：border-width:1px

使用數字+單位設置邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數字，大于0的數值。否則設置邊框border樣式無效。

3）、border邊框樣式：border-style:solid

上海HTML5開發培訓機構大咖提示：邊框border樣式值如下：

none :無邊框。與任何指定的border-width值無關

hidden : 隱藏邊框。IE不支持

dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）

dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）

solid :實線邊框（常用）

double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值

groove : 根據border-color的值畫3D凹槽

ridge :根據border-color的值畫菱形邊框

inset : 根據border-color的值畫3D凹邊

outset : 根據border-color的值畫3D凸邊

言

在前端開發中經常會用到很多的簡易圖形，例如三角形，箭頭，圓形等。有很多人一開始會想著用小的圖片實現，不過這樣會增加頁面請求次數，延緩頁面加載效果。

在CSS中有個border屬性，它完全可以達到制作各種簡易圖形的效果，今天我們就一起來看看吧。

文章中的代碼都已經放在了github上，感興趣的同學自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

CSS

border講解

在制作各種簡易圖形之前，我們先來看看border屬性的使用。

border是一個復合屬性。

• border-width表示邊框寬度。

• border-style表示邊框樣式，設置實線，虛線，點狀等。

• border-color表示邊框顏色，還可以設置transparent，表示透明。

border又分為上下左右四個方向，每個方向都占據各自的空間，不會出現重疊的地方，尤其是在四個方向的邊框都設置的情況下，在四個角處也不會出現重疊。

我們來看個最簡單的例子，在四個方向上都設置邊框，賦予不同的顏色。

圖片1

通過上面的圖片1可以看出，四個角處是分離，沒有重合的。

梯形

首先我們來看看梯形的效果圖。

梯形效果圖

我們再來分析下梯形是如何實現的。

• 因為我們完全是通過border設置，所以這個div的高度應該為0。

• 梯形的左右兩個腰，恰好如同border在角的銜接處，然后將兩側的border-style設置為transparent。

因此我們可以得到以下的CSS代碼。

梯形的CSS代碼

修改border-left和border-right的寬度值，可以改變梯形的形狀。

三角形

三角形也分為上下左右四個方向，我們首先來看看總體的形狀。

三角形

然后我們也來分析下如何實現這個效果，以下三角形為例。

• 因為是呈現三角形的形狀，剛好契合border在角落的銜接處，因此高度和寬度都應該為0。

• 下三角形是上部有區域，所以要設置border-top。

• border-left和border-right兩個方向都要設置寬度，然后設置為透明即可。

因此得到以下的CSS代碼，設置不同方向border的寬度，三角形的形狀也會跟著變。

下三角形CSS代碼

同理，只要掌握了其中一個方向的三角形原理，就會輕松寫出其他方向三角形的CSS代碼。

這里直接給出上三角形的CSS代碼。

上三角形CSS代碼

左三角形的CSS代碼如下所示。

左三角形CSS代碼

右三角形的CSS代碼如下所示。

右三角形CSS代碼

正方形-四種顏色

接下來我們看一種基本的只用border設計的形狀。

圖形

它的實現方式也很簡單，只需要將width和height設置為0，然后將border四個方向的寬度設置成一樣的即可。

得到的代碼如下所示。

CSS代碼

直角三角形

基于上述的實現，我們可以得到左下，左上，右上，右下四種三角形。

首先看看基本形狀。

直角三角形

看到圖形后，我們很容易發現，只要隱藏掉連接的兩個方向的border，顯示出另外兩個方向的border，就可以得到直角三角形。

這里我們只展示出左上三角形的CSS代碼。

左上直角三角形CSS代碼

其他方向的直角三角形代碼可類比得出，大家可以試一下。

六角星

首先我們看看六角星的形狀。

六角星

看到這個圖形，大家應該能想到可以由上下兩個三角形構成，只要將上下兩個三角形位置對應準確。

這里為了節省頁面元素的空間，我們可以采用偽元素去實現。

• 將頁面顯示元素設置為上三角形。

• 利用:after偽元素設置下三角形。

• 設置偽元素的position為absolute，調節right和top值。

通過上述分析，我們得到以下CSS代碼。

六角星CSS代碼

圓形

與border屬性搭配使用的還有一個很常用的屬性，那就是border-radius。

border-radius是專門設置圓角的，可以讓90度角變為圓角。

我們首先看看最基本的圓形的樣子。

圓形

其實我們只需要將border-radius屬性設置為寬或者高的一半以上即可。代碼如下所示。

圓形

同心圓

我們來看看同心圓的樣子。

同心圓

同心圓只需要設置一個border邊框，給border設置一個特殊的背景色，給div設置成白色背景即可。

同心圓CSS代碼

半圓

我們來看看半圓的形狀。

半圓

半圓的效果是如何實現的呢？

• 首先元素自身高度設置為0，設定寬度值。

• 設定上部和右部的border。

• 設定左上角和右上角的border-radius值。

得到的代碼如下所示。

上半圓

同理，下半圓，左半圓和右半圓修改對應的值就可以獲得。

結束語

今天這篇文章主要通過border屬性，畫出了一系列簡易的圖形，這在實際中是很實用的，大家學會了嗎?

、換行：<br>

2、超鏈接：<a></a>

示例源碼：

abc<br>dedfgsadfa<br>

<a href="#">超鏈接的文字</a> reference<br>

<a target="_self">百

度</a><br>

<a target="_blank">

以新窗口打開百度</a><br>

<a title="點擊有驚

喜">帶懸停提示的超鏈接</a><br>

<a title="xxxx"

target="_blank">帶懸停提示點擊以新窗口打開百度

</a><br>

<a title="yyyy"><img

src=cwhello.jpg" alt="yyyy"

style="border:none;"></a><br>

<a href="index1.html">點擊打開相對路徑的網頁</a>

3、字體傾斜：<i></i>、<em></em>

4、字體加粗：<b></b> 、<strong></strong> bold (磅)

5、字體下劃線：<u></u>

6、字體：<font></font>

Color 顏色設置

Size 大小，默認字體大小是12像素（px，pixel），size可以進行縮放，最大+7，最小-7，超出以最大值進行顯示；

Font-size 具體大小

Font-weight 具體粗細

Font-family 字體

Text-decoration 文本修飾

示例源碼：

<i>重<b>蔚</b><u>自</u><font color="red" size="+100" style="font-size:50px;font-weight:900; text-decoration:overline;"><font style="text-decoration:line-through; font-family:'華文行楷';">留地</font></font>！！！</i>

TIPS：默認字體位置c:\windows\fonts 目錄下

7、水平線：<hr>

Solid 固體（實線）、dashed（虛線）、double、dotted、……

<hr style="border:1px double yellow; height:1px;" />

8、列表：無序列表、有序列表

<!--unorderlist 無序-->

<ul>

<li>列表項</li>

<li>列表項</li>

<li>列表項</li>

<li>列表項</li>

</ul>

<!--orderlist 有序-->

<ol>

<li>列表項</li>

<li>列表項</li>

<li>列表項</li>

<li>列表項</li>

</ol>

9、文字上標：

10、文字下標：

11、文字標題：

<h1></h1>

<h1></h1>

……

<h6></h6>

TIPS:一個頁面最多用1個H1，2個H2，從H3開始隨意。

12、Seo:Search Enigee Oriented，搜索引擎優化。

13、元標簽：<meta>

<meta http-equiv="keywords" content="XXX美食網 美食 xxx" />

<meta http-equiv="description" content="XXX美食網 主打徽系精品菜系 " />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

14、編碼知識：

Gb2312 國標2312，保存中文第四代簡化字的編碼。

Gbk 包含中文簡體、繁體、火星文

UTF-8 國際通用網頁編碼，保存的文字內容比中文高一位。

1個漢字=2Byte=2*8bit

向上兼容：低版本軟件可以在高版本運行，反之則不一定。

15、容器級標簽：

<p></p> 段落

<div></div> 層

<span></span>

16、其他特殊：

一個英文半角空格 &nbsp;

小于 &lt;

大于 &gt;

&copy;

17、標簽分類與轉換：

所有的標簽可以分為二大類

1、塊（block）元素：后面的內容會自動換行！！！

2、內聯（行內inline）元素：后面的內容不會換行！！！

轉換：

<標簽 style=”display:inline;”></標簽>

例1

<a style="display:block;" href="#">aaaa</a>

<a href="#">bbb</a>

例2

<div style="display:inline;">aaa</div>

Bbb

比較下面2段代碼看看效果：

第一段：

<div style="visibility:hidden;">abc</div>

<div>edf</div>

第二段：

<div style=" display:none;">abc</div>

<div>edf</div>

瀏覽器訪問常用快捷鍵：

1) ctrl+鼠標滾輪，可以縮放瀏覽器的內容

2) Ctrl+0 可以使縮放的網頁顯示為正常大小

3) 在DW中F12為預覽快捷鍵