习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 href="http://www.cwhello.com" target="_self">百

度</a><br>

<a href="http://www.cwhello.com" target="_blank">

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

<a href="http://www.cwhello.com" title="点击有惊

喜">带悬停提示的超链接</a><br>

<a href="http://www.cwhello.com" title="xxxx"

target="_blank">带悬停提示点击以新窗口打开百度

</a><br>

<a href="http://www.cwhello.com" 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为预览快捷键