网页中的盒子模型边框介绍（29）
1、1.如图所示，我们新建一个记事本，并将记事本的名字改为“网页中的盒子模型
边框介绍（29）.html”，并回车键确定，以使文件转化为浏览器可以打开的
html网页文件。
2、2.如图所示，我们在这个html文档上鼠标右击，在弹出的下拉列表列表菜单中，
我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个文本编辑器
，对我们的html文档进行编辑。
3、3.如图所示，我们写一个<!DOCTYPE html>标签用来声明这是一个html5的文档，
在写一个,<html>标签用来包含html文档的主主体部分，再写一个<head>标签用
来包含html文档的头部部分，
写上<title>标签用来包含页的标题，再写一个<meta>标签来设置文字的编码方
式为UTF-8，以次让浏览器更好的显示我们所编写的网页。
4、4.如图所示，我们写上<body>标签用来包含html的主体，我们再写一个p标签，
并且在style属性里面，为其设置宽和高，而且设置其背景颜色为蓝色，设置其
盒子的边框宽度为20px，设置其边框颜色为green-绿色，设置其边框的显示样式
为solid-实线显示，这样我们就设置了一个宽度为20px，颜色为绿色的实线边框
了。
5、5.如图所示，再写一个p标签，并且在style属性里面，为其设置宽和高，而且设
置其背景颜色为蓝色，设置其盒子的边框宽度的上边框、右边框、下边框、左边
框分别为20px、30px、45px、50px，设置其边框颜色为red-红色，设置其边框的
显示样式为solid-实线显示，这样我们就设置了一个上边框宽度为20px、右边框
宽度为30px。下边框宽度为45px、左边框为50px，颜色为红色的实线边框了，这
个主要为了教大家如何给边框的四周设置不同的边框宽度。
6、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、7.如图所示，再写2个p标签，第一个p标签中我们设置其边框的上边框、右边框
、下边框、左边框的颜色依次为粉色、绿色、银色和橘红色，这个主要教大家给
边框的四周设置不同的颜色。第二个p标签我们设置其border-top-color的颜色
为红色，也就是设置其上边框的颜色为红色，这个主要教大家给上边框单独设置
颜色。
8、8.如图所示，再写4个p标签，用来设置盒子模型边框的样式，其第一个边框的样
式为none，那么也就是没有第二个p标签边框样式border-style属性值为dotted
，其边框的样式就为点状展示（dotted中文意思为有点的或星罗棋布的），第三
个边框的样式border-style属性值为groove,其边框样式为3D凹槽显示（groove
中文意思为沟或槽），第四个p标签主要设置了其4个边框四周不同的样式展示。
9、9.如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中
打开”这一项。
10、10.如图所示，我们看到我们设置的各种边框展示。
11、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; ">展
示盒子模型的边框
<!-- 给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个值时的情况
<!-- 设置边框不同边的宽度,其属性有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
<!-- 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
<!-- 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
<!-- 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
<!-- border-color演示设置四个颜色值的效果 -->
<p style="width:100px;height:100px;background-color:
blue; border-width: 20px;border-color:pink green silver
orange;border-style:solid ">展示盒子模型的边框的四个颜色值的效果
<!-- border-top-color演示设置上面颜色值的效果 -->
<p style="width:100px;height:100px;background-color:
blue; border-width: 20px;border-color:pink green silver
orange;border-top-color:red;border-style:solid ">展示盒子模型的边框的
上面颜色值的效果
<!-- boder-style的none默认值介绍及dotted点状显示风格
-->
<!-- none的展示,其是没有边框 -->
<p style="width:100px;height:100px;background-color:
blue; border-width: 20px;border-color:pink green silver
orange;border-style:none; ">展示盒子模型的边框的none
<!-- dotted点状风格展示 -->
<p style="width:100px;height:100px;background-color:
blue; border-width: 20px;border-color:pink green silver
orange;border-style:dotted; ">展示盒子模型的边框的dotted点状显示风格
<!-- groove其为3D凹槽边框展示 -->
<p style="width:100px;height:100px;background-color:
blue; border-width: 20px;border-color:pink green silver
orange;border-style:groove; ">展示盒子模型的边框的3D凹槽边框展示
<!-- 设置边框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 silver
orange;border-style:solid dotted dashed groove; ">展示盒子模型的边框的
3D凹槽边框展示
</body>
</html>