今天小编跟大家讲解下有关CSS 边框样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 边框样式 的相关资料，希望小伙伴们看了有所帮助。
我们来学习边框样式，主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时，可以分为上下左右四个边框，既可以同时设置四个边框的样式，也可以分开设置四个边框的样式。
关于边框样式的四个属性：
属性描述border-width设置边框的宽度border-style设置边框的样式border-color设置边框的颜色border在一个声明中设置所有的边框属性border-widthborder-width属性用于设置边框的宽度，也就是边框的粗细。
常用属性值如下所示：
属性值描述thin定义细的边框medium默认，定义中等的边框thick定义粗的边框length自定义边框的宽度，单位为像素pxinherit规定应该从父元素继承边框宽度我们一般会使用length作为border-width属性的属性值，即设置边框的粗细为多少像素，例如1px、2px、3px等。border-width属性可以同时为所有边框设置宽度，也可以单独地为每个边框设置宽度。
示例：为上、右、下、左四个边框分别设置边框粗细：
border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;根据简写属性border-width，我们也可以直接写成：
border-width:1px 2px 3px 4px;记住在简写时，为边框设置宽度的顺序为 上、右、下、左，是顺时针顺序。
而当元素的上下边框或左边框的宽度一致时，也可以使用简写，例如上下边框为1px、左右边框为2px，可以写成：
border-width:1px 2px;border-styleborder-style属性用于设置元素的边框样式。和border-width一样，可以同时为四个边框设置边框样式，也可以分别为每个边框单独设置边框样式。
border-style的属性值有很多个，但是在实际网页制作中，常用属性值有下面四种：
属性值描述dotted定义点状边框dashed定义虚线边框solid定义实线边框none无边框示例：例如设置上、右、下、左的边框样式为实线、虚线、实线、虚线：
border-top-style:solid;border-right-style:dashed;border-bottom-style:solid;border-left-style:dashed;可以简写成：
border-style: solid dashed solid dashed;当元素的上下边框和左右边框样式一致时，也可以写成：
border-style: solid dashed; border-colorborder-color属性可以用于设置边框颜色。属性值可以是任何合法的颜色值，例如颜色名、十六进制颜色值、RGB颜色值等。
border-color属性同样可以同时设置四个边框的颜色，也可以单独设置四条边框的颜色。
示例：例如设置上、右、下、左边框颜色为红黄蓝绿：
border-top-color:red;border-right-color:yellow;border-bottom-color:blue;border-left-color:green;可以简写为：
border-color:red yellow blue green;border上面我们讲了border-width、border-style、border-color三个属性，但是其实我们在实际应用中，一般不会单独来设置边框宽度或者颜色等，而是直接使用通过border简写属性来设置所有的边框属性。
border属性可以直接设置所有边框的样式，如果要单独设置每个边框的样式则可以使用border-top、border-right、border-bottom、border-left。
示例：将下面这个<div>标签的边框设置成 3像素、虚线、紫色：
<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>css学习(9xkd.com)</title> <link rel="stylesheet"type="text/css"href="http://www.fly63.com/article/detial/9735/index.css"> </head> <body> <div>设置一个边框</div> </body></html>CSS 样式代码：
div{width: 100px;height: 100px;border:3px dashed purple;}来源：爱蒂网
