1、如图所示，我们新建一个记事本，并将记事本的名字改为“网页中的盒子模型边框介绍（29）.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2、如图所示，我们在这个html文档上鼠标右击，在弹出的下拉列表列表菜单中，我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个文本编辑器，对我们的html文档进行编辑。
3、如图所示，我们写一个<!DOCTYPE html>标签用来声明这是一个html5的文档，在写一个,<html>标签用来包含html文档的主主体部分，再写一个<head>标签用来包含html文档的头部部分，写上<title>标签用来包含页的标题，再写一个<meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。
4、如图所示，我们写上<body>标签用来包含html的主体，我们再写一个p标签，并且在style属性里面，为其设置宽和高，而且设置其背景颜色为蓝色，设置其盒子的边框宽度为20px，设置其边框颜色为green-绿色，设置其边框的显示样式为solid-实线显示，这样我们就设置了一个宽度为20px，颜色为绿色的实线边框了。
5、如图所示，再写一个p标签，并且在style属性里面，为其设置宽和高，而且设置其背景颜色为蓝色，设置其盒子的边框宽度的上边框、右边框、下边框、左边框分别为20px、30px、45px、50px，设置其边框颜色为red-红色，设置其边框的显示样式为solid-实线显示，这样我们就设置了一个上边框宽度为20px、右边框宽度为30px。下边框宽度为45px、左边框为50px，颜色为红色的实线边框了，这个主要为了教大家如何给边框的四周设置不同的边框宽度。
6、如图所示，再写3个p标签，用来演示边框宽度的四个属性，其属性有border-top-width：边框的高度设置，border-right-width:边框的右宽度的设置，border-bottom-width：边框的下边框宽度设置，border-left-width:边框的左边框的宽度设置，第一个p标签设置的border-top-width为80px的上边框，第二个p标签的border-right-width为10px的右边框，第三个p标签的border-bottom-width为30px的下边框，第四个p标签的border-left-width为50px的左边框。
7、如图所示，再写2个p标签，第一个p标签中我们设置其边框的上边框、右边框、下边框、左边框的颜色依次为粉色、绿色、银色和橘红色，这个主要教大家给边框的四周设置不同的颜色。第二个p标签我们设置其border-top-color的颜色为红色，也就是设置其上边框的颜色为红色，这个主要教大家给上边框单独设置颜色。
8、如图所示，再写4个p标签，用来设置盒子模型边框的样式，其第一个边框的样式为none，那么也就是没有第二个p标签边框样式border-style属性值为dotted，其边框的样式就为点状展示（dotted中文意思为有点的或星罗棋布的），第三个边框的样式border-style属性值为groove,其边框样式为3D凹槽显示（groove中文意思为沟或槽），第四个p标签主要设置了其4个边框四周不同的样式展示。
9、如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。
10、如图所示，我们看到我们设置的各种边框展示。
11、如图所示，这是本案例的源代码，大家可以直接复制粘贴代码到一个空白的txt文件，并保存这个文件之后，修改这个txt的文件后缀名为html，然后直接点击打开这个html文件，就可以看到本大神为大家编写的这个网页了！<!-- 用<!DOCTYPE html>来声明这是一个html5的文档 --><!DOCTYPE html><!-- 用<html>标签来包含网页的主体 --><html><!-- 用head标签包含html的头部部分 --><head><!-- 用title标签来写入网页的标题 --><title>CSS文本样式的的设置（28）</title><!-- 用meta标签来设置文档的编码格式，以便浏览器能够正确解读网页 --><meta charset="utf-8"></head><!-- 用body标签包含html文档的主体部分 --><body><!-- 设置盒子模型的盒子边框border的展示，其必须设置边框的颜色、宽度及显示的样式，不然不会显示边框 --><!-- 设置的内容区高度和宽度为100px --><!-- 设置盒子的边框的宽度为20px --><!-- 设置盒子的边框的颜色为green-绿色 --><!-- 设置盒子的边框的样式为solid实线显示 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color: green;border-style:solid; ">展示盒子模型的边框</p><!-- 给border-width设置4个值时，其值会按照从上面开始的顺时针分配值 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px 30px 45px 50px;border-color: red;border-style:solid; ">展示盒子模型的边框的width有4个值时的情况</p><!-- 设置边框不同边的宽度,其属性有border-top-width：边框的高度设置，border-right-width:边框的右宽度的设置，border-bottom-width：边框的下边框宽度设置，border-left-width:边框的左边框的宽度设置--><!-- border-top-width演示 --><p style="width:100px;height:100px;background-color:blue;border-color: green;border-style:solid;border-top-width:80px; ">展示盒子模型的边框的上边框宽度为80px</p><!-- border-right-width演示 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color: green;border-style:solid;border-right-width:10px; ">展示盒子模型的边框的右边框宽度为10px</p><!-- border-bottom=width演示 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color: green;border-style:solid;border-bottom-width:30px; ">展示盒子模型的边框的下边框宽度为30px</p><!-- border-left-width演示 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color: green;border-style:solid;border-left-width:50px; ">展示盒子模型的边框的左边框宽度为50px</p><!-- border-color演示设置四个颜色值的效果 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color:pink green silverorange;border-style:solid ">展示盒子模型的边框的四个颜色值的效果</p><!-- border-top-color演示设置上面颜色值的效果 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color:pink green silverorange;border-top-color:red;border-style:solid ">展示盒子模型的边框的上面颜色值的效果</p><!-- boder-style的none默认值介绍及dotted点状显示风格--><!-- none的展示,其是没有边框 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color:pink green silverorange;border-style:none; ">展示盒子模型的边框的none</p><!-- dotted点状风格展示 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color:pink green silverorange;border-style:dotted; ">展示盒子模型的边框的dotted点状显示风格</p><!-- groove其为3D凹槽边框展示 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color:pink green silverorange;border-style:groove; ">展示盒子模型的边框的3D凹槽边框展示</p><!-- 设置边框border-style的4个边框的不同样式设置，其值分别为：solid（实线）、dotted（点状线）、dashed(虚线)、groove(3D凹槽线),其设置三边规则为上、左右、下，其设置两边规则为上下、左右，其也提供了border-top-style、border-right-style、border-bottom-style、border-left-style的设置 --><p style="width:100px;height:100px;background-color:blue; border-width: 20px;border-color:pink green silverorange;border-style:solid dotted dashed groove; ">展示盒子模型的边框的3D凹槽边框展示</p></body></html>