网页中的html元素都可以看作盒子模型，盒子模型被用在css技术中用来对网页中的元素进行更好的设计和布局，下面我们就来介绍下这个盒模型的边框，其实就是类似与生活中盒子的边框。
工具/原料
1
windows记事本（任意一个版本即可）
2
Sublime(也是一 种记事本)
3
任意一个浏览器即可（这里使用Google Chrome浏览器）
方法/步骤
1
1.如图所示，我们新建一个记事本，并将记事本的名字改为“网页中的盒子模型边框介绍（29）.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2
2.如图所示，我们在这个html文档上鼠标右击，在弹出的下拉列表列表菜单中，我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个文本编辑器，对我们的html文档进行编辑。
3标签用来包含页的标题，再写一个<meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。</p></div><div class="listcon"><span>4</span><p>4.如图所示，我们写上<body>标签用来包含html的主体，我们再写一个p标签，并且在style属性里面，为其设置宽和高，而且设置其背景颜色为蓝色，设置其盒子的边框宽度为20px，设置其边框颜色为green-绿色，设置其边框的显示样式为solid-实线显示，这样我们就设置了一个宽度为20px，颜色为绿色的实线边框了。</p></div><div class="listcon"><span>5</span><p>5.如图所示，再写一个p标签，并且在style属性里面，为其设置宽和高，而且设置其背景颜色为蓝色，设置其盒子的边框宽度的上边框、右边框、下边框、左边框分别为20px、30px、45px、50px，设置其边框颜色为red-红色，设置其边框的显示样式为solid-实线显示，这样我们就设置了一个上边框宽度为20px、右边框宽度为30px。下边框宽度为45px、左边框为50px，颜色为红色的实线边框了，这个主要为了教大家如何给边框的四周设置不同的边框宽度。</p></div><div class="listcon"><span>6</span><p>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的左边框。</p></div><div class="listcon"><span>7</span><p>7.如图所示，再写2个p标签，第一个p标签中我们设置其边框的上边框、右边框、下边框、左边框的颜色依次为粉色、绿色、银色和橘红色，这个主要教大家给边框的四周设置不同的颜色。第二个p标签我们设置其border-top-color的颜色为红色，也就是设置其上边框的颜色为红色，这个主要教大家给上边框单独设置颜色。</p></div><div class="listcon"><span>8</span><p>8.如图所示，再写4个p标签，用来设置盒子模型边框的样式，其第一个边框的样式为none，那么也就是没有第二个p标签边框样式border-style属性值为dotted，其边框的样式就为点状展示（dotted中文意思为有点的或星罗棋布的），第三个边框的样式border-style属性值为groove,其边框样式为3D凹槽显示（groove中文意思为沟或槽），第四个p标签主要设置了其4个边框四周不同的样式展示。</p></div><div class="listcon"><span>9</span><p>9.如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。</p></div><div class="listcon"><span>10</span><p>10.如图所示，我们看到我们设置的各种边框展示。</p></div><div class="listcon"><span>11</span><p>11.如图所示，这是本案例的源代码，大家可以直接复制粘贴代码到一个空白的txt文件，并保存这个文件之后，修改这个txt的文件后缀名为html，然后直接点击打开这个html文件，就可以看到本大神为大家编写的这个网页了！<!-- 用<!DOCTYPE html>来声明这是一个html5的文档 --><!DOCTYPE html><!-- 用<html>标签来包含网页的主体 --><html><!-- 用head标签包含html的头部部分 --><head><!-- 用title标签来写入网页的标题 --><title>CSS文本样式的的设置（28）
3.如图所示，我们写一个标签用来声明这是一个html5的文档，在写一个,标签用来包含html文档的主主体部分，再写一个
标签用来包含html文档的头部部分，写上展示盒子模型的边框
展示盒子模型的边框的width有4个值时的情况
展示盒子模型的边框的上边框宽度为80px
展示盒子模型的边框的右边框宽度为10px
展示盒子模型的边框的下边框宽度为30px
展示盒子模型的边框的左边框宽度为50px
展示盒子模型的边框的四个颜色值的效果
展示盒子模型的边框的上面颜色值的效果
展示盒子模型的边框的none
展示盒子模型的边框的dotted点状显示风格
展示盒子模型的边框的3D凹槽边框展示
展示盒子模型的边框的3D凹槽边框展示
注意事项
1
1.欢迎大家有问题时，向本大神进行提问哦！
2
2.没有软件的也可以找本大神。
3
3.教程不只是本篇，而是前端从入门到精通一个系列，欢迎浏览其他教程经验， 祝您早日成为前端大神。
上一篇：包装设计师怎么验证盒子
下一篇：抑郁症的表现与解决