共计 3283 个字符，预计需要花费 9 分钟才能阅读完成。
咱们学习如何利用 CSS 给元素增加边框。
CSS 边框属性，容许咱们指定一个元素边框的款式、宽度和色彩。
咱们先来学习元素边框的款式。border-style 属性指定了要显示什么样的边框。容许应用以下的值：
dotted，定义一个点状的边框
dashed，定义一个虚线边框
solid，定义一个实线边框
double，定义一个双倍的边框
none，定义无边框
hidden，定义一个暗藏的边框
咱们来试验一下。
创立一个 009-css-borders 文件夹，在文件夹里创立一个 css-borders.html 文件和一个 border-style.css 文件。
构建 html 根底代码，引入款式文件。
编写 p.dotted 回车，填入文本点状的边框。依照同样的办法，增加其余的几个边框构造。
<p> 点状的边框 </p>
<p> 虚线边框 </p>
<p> 实线边框 </p>
<p> 双倍的边框 </p>
<p> 无边框 </p>
<p> 暗藏的边框 </p>
<p> 混合边框 </p>
<p> 速记边框 </p>
在 css 里定义 p.dotted 选择器，申明款式 border-style: dotted。定义其余几个选择器，全副申明 border-style 属性，值别离为：dashed、solid、double、none、hidden。
在浏览器里查看后果，边框的成果都做好了。
border-style: none 和 border-style: hidden 视觉上都不显示边框，有什么区别呢？
在 html 里编写：table 大于 括号 tr 大于 td 乘以 3 再乘以 3（table>(tr>td3)3）。回车，创立一个 3 行 3 列的表格。给 table 元素定义 border 属性，值为 1。给第二行第一个和第二个 td 定义 class 属性，值别离为 lm、m。
在 css 里定义 table 选择器，申明款式 border-collapse: collapse，让表格线细一些。这个属性咱们在前面会具体解说。
定义 td.lm 选择器，申明款式 border-style: dashed。定义 td.m 选择器，申明款式 text-align: center。
看一下成果，左中和左上、中以及左下边框是相邻的，在这些单元格上定义边框款式肯定会产生抵触。
给 td.m 选择器增加款式申明 border-style: none。
咱们看，没有去掉任何边框。
再把 border-style 属性值改为 hidden。
咱们再看，两头的 td 边框隐没了，当然，左侧相邻的边框也隐没了。
当表格单元格相邻边框产生抵触时，border-style: hidden 优先级最高，border-style: solid 优先级次之，border-style: none 优先级最低。
还是这个表格示例，单元格左中和中之间用点线来分隔。如何实现呢？
在 td.m 选择器里将 border-style 的值改为 dotted。
很显然，并不是咱们要的成果。看来，得把单元格左中的左边线暗藏。如何管制一条边框线呢？
能够在 border-style 两头增加一个示意方位的词，就能够设置单个边框线了。
比方，给 td.lm 选择器申明 border-right-style 属性，就能够设置这个单元格左边框款式了，这里设置的值为 none。
成果实现了。
把这里的 border-right-style 的值设置为 hidden 是什么成果呢
通过这个例子发现，能够别离指定每个边框的款式。这些属性有 border-top-style、border-right-style、border-bottom-style、border-left-style，用来设置元素的上、右、下、左边框的款式。
除了单个款式属性外，border-style 的属性值，还能够应用混合的简写办法。有四种写法：
第一种写法：四个值，别离代表上边、左边、下边、右边的边框款式。从顶部开始，依照顺时针方向来设置值。比方 border-style: dotted solid double dashed，设置上边框为虚线、左边框为实线、下边框为双线、左边框为虚线。
第二种写法：三个值，别离代表上边、左右边、下边的边框款式。第一个值示意上边框的款式、第二个值示意右边和左边框的款式，第三个值示意下边框的款式。比方 border-style: dotted solid double，设置顶部边框为虚线、左右边框为实线，底部边框是双线。
第三种写法：两个值，别离示意上下边，左右边的边框款式。第一个值示意高低边框的款式、第二个值示意左右边框的款式。比方 border-style: dotted solid，设置顶部和底部的边框是点状的、左边和右边的边框是实心的。
第四种写法：一个值，示意四个边框的款式。比方 border-style: dotted，四个边都是点状边框。
在 html 里增加一个 p 元素，定义 属性。填入一些文本。
在 css 里定义 p.mix 选择器，申明款式 border-style: dotted dashed solid double。
最初一个段落的混合边框实现了。
除了设置边框款式，还能够设置边框的宽度。
border-width 属性用于设置四个边框的宽度。宽度能够被设置为一个特定的尺寸，以 px、em 等为单位，或者应用三个预约义的值：thin、medium、thick——薄、中、厚。
给前三个 p 元素全副申明 border-width 款式属性，值别离为 5px，0.5em，thick。
三个段落的边框线宽度就增加好了。
和边框款式 border-style 属性一样，边框宽度的值也能够应用混合的简写办法，能够给 border-width 设置四个值、三个值、两个值或一个值。
给第四个 p 元素增加 border-width: 5px 10px; 款式。
咱们看，这个边框宽度高低是 5 像素，左右是 10 像素。
再给最初一个 p 元素增加 border-width: 2px 3px 4px 5px 款式。
这样，四边不同的边框，就领有了不同的宽度！
除了设置边框款式，还能够设置边框的色彩。
border-color 属性用于设置四个边框的色彩。能够通过色彩名称、十六进制色彩值、RGB 色彩值来设置色彩，也能够通过 transparent 来设置通明。
给前三个 p 元素全副申明 border-color 款式属性，值别离为 red，#00ff00，rgb(0, 0, 255)。
三个段落的边框线色彩就增加好了。
和边框款式 border-style 属性一样，边框色彩的值也能够应用混合的简写办法，能够给 border-color 设置四个值、三个值、两个值或一个值。
给第四个 p 元素增加 border-color: purple orange 款式。
咱们看，这个边框高低是紫色，左右是橙色。
再给最初一个 p 元素增加 border-color: red green blue yellow 款式。
这样，四边不同的边框，就领有了不同的色彩！
和字体 font 属性一样，边框也能够应用速记属性。为了缩短代码，能够在一个 border 属性中指定 border-style、border-width、border-color 等独自的边框属性。比方：border: 5px solid red，示意设置元素的边框宽度为 5 像素，边框款式为实线，边框色彩为红色。
留神，border-style 是必须要申明的，其余两个能够省略，省略后会采纳 1 像素、彩色线这两个默认值。
在 html 里增加一个 p 元素，定义 属性。填入一些文本。
在 css 里定义 p.shorthand 选择器，申明款式 border: 5px solid #ccc。
一行款式代码就实现了边框款式、宽度和色彩的设置！
这个简写的办法默认四个边，全副定义了雷同的边框。能不能定义单个边呢？能够的！
很天然的猜到，通过申明 border-top，border-right，border-bottom，border-left 四个属性，值为下面简写的形式，就能够独自定义元素的某一条边了。
正文掉这行代码，再申明一个 border-bottom 属性，值同样是 5px solid #ccc。
一行代码，同样实现了一条底部的边框线
文章配套视频链接：https://www.bilibili.com/vide…
