上海HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖分享html虛線邊框設(shè)置教程

習(xí)HTML時有時候我們需要用代碼設(shè)置邊框或虛線邊框的樣式，那該怎么設(shè)置呢？下面上海非凡進(jìn)修學(xué)院HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖分享下html虛線邊框設(shè)置教程，會對幾個不同標(biāo)簽加虛線邊框效果樣式，同學(xué)們可以根據(jù)示例靈活掌握與應(yīng)用到自己DIV+CSS布局中。

為了對html不同標(biāo)簽加邊框虛線，我們選擇幾個常用標(biāo)簽對齊設(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)對象邊框效果，要設(shè)置邊框?qū)挾取⑦吙蝾伾⑦吙驑邮剑▽?shí)線還是虛線）

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

4、實(shí)例描述

我們對以上幾個標(biāo)簽設(shè)置相同寬度、相同高度、邊框效果。

5、HTML代碼示例：

以上示例對html中不同標(biāo)簽設(shè)置相同的樣式，包括相同邊框虛線。

上海HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖提示邊框三個樣式

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

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

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

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

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

上海HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖提示：邊框border樣式值如下：

none :無邊框。與任何指定的border-width值無關(guān)

hidden : 隱藏邊框。IE不支持

dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點(diǎn)線。否則為實(shí)線（常用）

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

solid :實(shí)線邊框（常用）

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

groove : 根據(jù)border-color的值畫3D凹槽

ridge :根據(jù)border-color的值畫菱形邊框

inset : 根據(jù)border-color的值畫3D凹邊

outset : 根據(jù)border-color的值畫3D凸邊

言

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

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

文章中的代碼都已經(jīng)放在了github上，感興趣的同學(xué)自取。

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

CSS

border講解

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

border是一個復(fù)合屬性。

border-width表示邊框?qū)挾取?/p>
border-style表示邊框樣式，設(shè)置實(shí)線，虛線，點(diǎn)狀等。
border-color表示邊框顏色，還可以設(shè)置transparent，表示透明。

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

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

圖片1

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

梯形

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

梯形效果圖

我們再來分析下梯形是如何實(shí)現(xiàn)的。

因?yàn)槲覀兺耆峭ㄟ^border設(shè)置，所以這個div的高度應(yīng)該為0。
梯形的左右兩個腰，恰好如同border在角的銜接處，然后將兩側(cè)的border-style設(shè)置為transparent。

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

梯形的CSS代碼

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

三角形

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

三角形

然后我們也來分析下如何實(shí)現(xiàn)這個效果，以下三角形為例。

因?yàn)槭浅尸F(xiàn)三角形的形狀，剛好契合border在角落的銜接處，因此高度和寬度都應(yīng)該為0。
下三角形是上部有區(qū)域，所以要設(shè)置border-top。
border-left和border-right兩個方向都要設(shè)置寬度，然后設(shè)置為透明即可。

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

下三角形CSS代碼

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

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

上三角形CSS代碼

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

左三角形CSS代碼

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

右三角形CSS代碼

正方形-四種顏色

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

圖形

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

得到的代碼如下所示。

CSS代碼

直角三角形

基于上述的實(shí)現(xiàn)，我們可以得到左下，左上，右上，右下四種三角形。

首先看看基本形狀。

直角三角形

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

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

左上直角三角形CSS代碼

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

六角星

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

六角星

看到這個圖形，大家應(yīng)該能想到可以由上下兩個三角形構(gòu)成，只要將上下兩個三角形位置對應(yīng)準(zhǔn)確。

這里為了節(jié)省頁面元素的空間，我們可以采用偽元素去實(shí)現(xiàn)。

將頁面顯示元素設(shè)置為上三角形。
利用:after偽元素設(shè)置下三角形。
設(shè)置偽元素的position為absolute，調(diào)節(jié)right和top值。

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

六角星CSS代碼

圓形

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

border-radius是專門設(shè)置圓角的，可以讓90度角變?yōu)閳A角。

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

圓形

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

圓形

同心圓

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

同心圓

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

同心圓CSS代碼

半圓

我們來看看半圓的形狀。

半圓

半圓的效果是如何實(shí)現(xiàn)的呢？

首先元素自身高度設(shè)置為0，設(shè)定寬度值。
設(shè)定上部和右部的border。
設(shè)定左上角和右上角的border-radius值。

得到的代碼如下所示。

上半圓

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

結(jié)束語

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

、換行：<br>

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

示例源碼：

abc<br>dedfgsadfa<br>

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

<a target="_self">百

度</a><br>

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

<a title="點(diǎn)擊有驚

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

<a title="xxxx"

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

</a><br>

<a title="yyyy"><img

src=cwhello.jpg" alt="yyyy"

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

<a href="index1.html">點(diǎn)擊打開相對路徑的網(wǎng)頁</a>

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

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

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

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

Color 顏色設(shè)置

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

Font-size 具體大小

Font-weight 具體粗細(xì)

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：默認(rèn)字體位置c:\windows\fonts 目錄下

7、水平線：<hr>

Solid 固體（實(shí)線）、dashed（虛線）、double、dotted、……

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

<ul>

<li>列表項(xiàng)</li>

</ul>

<ol>

<li>列表項(xiàng)</li>

</ol>

9、文字上標(biāo)：<sup></sup>

10、文字下標(biāo)：<sub></sub>

11、文字標(biāo)題：

……

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

12、Seo:Search Enigee Oriented，搜索引擎優(yōu)化。

13、元標(biāo)簽：<meta>

14、編碼知識：

Gb2312 國標(biāo)2312，保存中文第四代簡化字的編碼。

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

UTF-8 國際通用網(wǎng)頁編碼，保存的文字內(nèi)容比中文高一位。

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

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

15、容器級標(biāo)簽：

<p></p> 段落

<div></div> 層

16、其他特殊：

一個英文半角空格  

小于 <

大于 >

17、標(biāo)簽分類與轉(zhuǎn)換：

所有的標(biāo)簽可以分為二大類

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

2、內(nèi)聯(lián)（行內(nèi)inline）元素：后面的內(nèi)容不會換行！！！

轉(zhuǎn)換：

<標(biāo)簽 style=”display:inline;”></標(biāo)簽>

例1

例2

Bbb

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

第一段：

第二段：

瀏覽器訪問常用快捷鍵：

1) ctrl+鼠標(biāo)滾輪，可以縮放瀏覽器的內(nèi)容

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

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

在線咨詢

上一篇：一篇文章帶你了解CSS3圓角知識
下一篇：獨(dú)家福利！在手機(jī)上看7路大閱兵特殊鏡頭，只需3步

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

上海HTML5開發(fā)培訓(xùn)機(jī)構(gòu)大咖分享html虛線邊框設(shè)置教程

言

border講解

梯形

三角形

正方形-四種顏色

直角三角形

六角星

圓形

同心圓

半圓

結(jié)束語

您的項(xiàng)目需求