我们学习如何应用CSS给元素添加边框。CSSborder属性允许我们指定元素边框的样式、宽度和颜色。我们先了解一下元素边框的样式。border-style属性指定要显示的边框类型。允许以下值：dotted，定义虚线边框dashed，定义虚线边框solid，定义实线边框double，定义双边框none，定义无边框隐藏，定义隐藏边框我们来试验一次。创建一个009-css-borders文件夹，并在该文件夹内创建一个css-borders.html文件和一个border-style.css文件。构建html基本代码并导入样式文件。写入p.dotted并回车，填充文本的虚线边框。以同样的方式，添加其他几个边框结构。
虚线边框
虚线边框
实线边框
双边框
无边框
隐藏边框
混合边框
速记边框
在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)。按Enter键创建一个3行3列的表格。为table元素定义border属性，值为1。为第二行第一个和第二个td定义class属性，分别为lm和m的值。在css中定义表格选择器，声明样式border-collapse:collapse，表格线条变细。稍后我们将详细解释此属性。定义td.lm选择器并声明样式border-style:dashed。定义td.m选择器并声明样式text-align:center。看一下效果，左中和左上、左中和左下边框是相邻的，在这些单元格上定义边框样式肯定会引起冲突。将样式声明border-style:none添加到td.m选择器。让我们看看，没有一个边框被移除。然后将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:dottedsoliddoubledashed，设置上边框为虚线，右边框为实线，下边框为双线，左边框为虚线。第二种写法：三个值，分别代表上、左、右、下的边框样式。第一个值代表上边框的样式，第二个值代表左右边框的样式，第三个值代表下边框的样式。例如border-style:dottedsoliddouble，设置上边框为虚线，左右边框为实线，下边框为双线。第三种写法：两个值，分别代表上下左右两边的边框样式。第一个值代表上下边框的样式，第二个值代表左右边框的样式。例如border-style:dottedsolid，设置上下边框为虚线，左右边框为实线。第四种写法：一个值，表示四个边框的样式。例如border-style:dotted，四个边都是虚线边框。在html中添加一个p元素并定义属性。填写一些文字。在css中定义p.mix选择器，声明样式border-style:dotteddashedsoliddouble。最后一段的混合边框已实现。除了设置边框样式，还可以设置边框的宽度。border-width属性用于设置四个边框的宽度。宽度可以设置为特定大小，以px、em等为单位，或使用三个预定义值：thin、medium、thick-thin、medium、thick。为前三个p元素声明border-width样式属性，值分别为5px、0.5em、thickness。添加了三个段落的边框线宽。和border-style属性一样，border-width的值也可以使用混合简写的方式。border-width可以设置四个值，三个值，两个值或者一个值。添加边框宽度：5px10px；到第四个p元素。看一下，边框宽度上下5个像素，左右10个像素。然后将border-width:2px3px4px5px样式添加到最后一个p元素。这样四个边的不同边框就有了不同的宽度！除了设置边框样式，还可以设置边框的颜色。border-color属性用于设置四个边框的颜色。可以通过颜色名称、十六进制颜色值、RGB颜色值设置颜色，也可以通过透明设置透明度。为前三个p元素声明border-color样式属性，值为red，#00ff00，rgb(0,0,255)。添加了三个段落的边框线颜色。和边框样式的border-style属性一样，边框颜色的取值也可以使用混合简写的方式。border-color可以设置四个值，三个值，两个值或者一个值。为第四个p元素添加border-color:purpleorange样式。大家看看，这个边框的上下是紫色的，左右是橙色的。给最后一个p元素添加一个border-color:redgreenblueyellow样式。这样，四个边的不同边框就有了不同的颜色！与字体属性一样，边框也可以使用速记属性。为了缩短代码，可以在一个边框属性中指定单独的边框属性，例如边框样式、边框宽度、边框颜色等。例如：border:5pxsolidred表示集合元素的边框宽度为5像素，边框样式为实线，边框颜色为红色。注意必须声明border-style，其他两个可以省略。省略后，将使用默认值1像素和黑线。在html中添加一个p元素并定义属性。填写一些文字。在css中定义p.shorthand选择器并声明样式边框：5pxsolid#ccc。一行样式代码实现边框样式、宽度、颜色的设置！这种速记方法默认为四个边，都定义相同的边框。是否可以定义单个边？好的！很自然的猜测，通过声明border-top、border-right、border-bottom、border-left这四个属性，取值为上面的缩写，就可以分别定义元素的某一边。注释掉这行代码，然后声明一个border-bottom属性，其值为5pxsolid#ccc。一行代码还实现了底部的边框线文章支持视频链接：https://www.bilibili.com/video...