作者|李娜

*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。

上一篇文章让我们对盒子模型以及css样式有了初步的认识，那么这一篇文章，我们就来详细的了解盒子模型的边框（ border ）。

元素的边框 ( border ) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的宽度、样式和颜色。

类似这样border：1px solid red；其中px是宽度的的单位，1px 代表一个像素单位，想要增加边框的宽度，增加前面的数字就好了。

样式是边框最重要的一个属性，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，就根本没有边框。

这里给大家列出一些样式小伙伴们可以自己试着写一下感受一下效果。

none定义无边框。

hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted定义点状边框。在大多数浏览器中呈现为实线。

dashed定义虚线。在大多数浏览器中呈现为实线。

solid定义实线。

double定义双线。双线的宽度等于 border-width 的值。

groove定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge定义 3D 垄状边框。其效果取决于 border-color 的值。

inset定义 3D inset 边框。其效果取决于 border-color 的值。

outset定义 3D outset 边框。其效果取决于 border-color 的值。

inherit规定应该从父元素继承边框样式。

这是部分样式的实现代码（这种选择方式称之为类选择器，我在之后的文章中介绍给大家）：

效果图如下

除了样式（风格）还有颜色：CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。

颜色颜色 HEX颜色 RGB

#000000rgb(0,0,0)

#FF0000rgb(255,0,0)

#00FF00rgb(0,255,0)

#0000FFrgb(0,0,255)

#FFFF00rgb(255,255,0)

#00FFFFrgb(0,255,255)

#FF00FFrgb(255,0,255)

#C0C0C0rgb(192,192,192)

#FFFFFFrgb(255,255,255)

以及一些标准的代表颜色的单词：像 red 红色 blue 蓝色等等。

其中这种1颜色的搭配有一千六百万种组合（256*256*256）所以我们不用担心颜色会不够用。

那么既然我们已经知道了边框的要素和使用就来试试吧!

我们可以分别为上下左右四条边框设计样式：

border-top:1px solid red; /*上边框*/

border-right:1px solid red; /*右边框*/

border-bottom:1px solid red; /*下边框*/

border-left:1px solid red; /*左边框*/

甚至是点一边框的单一属性。

border-top-color: red;/*上边框颜色*

border-right-style:solid ;/*右边框风格*/

border-bottom-width:70px;/*下边框宽度*/

border-left-color/solid/width

源码示例

生成效果

小伙伴们快来动手试试吧！做出自己喜欢的效果！！！

当然上面的美观有待提升，做成这个样子，但是很生动形象啊！当然有什么问题或者需要李娜我给大家分享讲解的地方，可以在留言区留言告诉我，整理后会在公众号里面分享讲解哦！

有疑问？请留言！关注Java联盟微信公众号，看Java要闻！