border 边框
有时候在 页面 中需 要做 一些分割来区分不同的区域，这个 属性 不但可以用来给元素 添加 一个 边框，也可以作为不同区域的分割线。
1. 官方解释
CSS 的 border 属性 是 一个 用于设置各种单独的边界 属性 的简写 属性 。 border 可以用于设置 一个 或多个以下 属性 的值： border-width 、 border-style 、 border-color 。
2. 解释
任何 一个 h5 标签 通过 添加 一个 border 属性 ，可以给它设置边框的宽度、展示出来的样子（实线、虚线、圆点等）和颜色。
3. 语法
border: [border-width ||border-style ||border-color |inherit] ;
属性 值：
参数 名称 参数类型 解释 border-width [‘px’|‘rem’|’%’] 控制边框的宽度 border-style string 控制边框的样式 border-color string 控制边框的颜色 inherit [’’|’’] 控制边框展示在元素宽高尺寸的外部还是内部
border-width 、 border-style 、 border-color 它们的 用法 遵循 css 的： 左上、 右上 、右下 、左下 的原则。最多可以 添加 4 个参数。
相关 属性 ：
参数 名称 参数类型 border-top [border-width |border-style |border-color |inherit] border-b ott om [border-width |border-style |border-color |inherit] border-right [border-width |border-style |border-color |inherit] border-left [border-width |border-style |border-color |inherit]
boder 可以直接设置元素的宽度、边框样式、颜色，不需要再去单独通过 border-width 、 border-style 、 border-color 去设置。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android all all all all all all all all
5. 实例
接下来我们通过 一个 div 元素，来说明 border 的使用 方法 。
< div class = " demo " > </ div >
为 demo 增加 边框
.demo {
width : px ;
height : px ;
border : px solid #ddd ;
}
效果 图
为 demo 增加 边框 效果 图
解释：通过 border 为 div 四周 增加 一个 宽度为 1px、填充样式为 solid (实线)、颜色为 #ddd 的边框。
只给 demo 的顶部 增加 一个 边框：
.demo {
width : px ;
height : px ;
border-top : px solid #000 ;
background : #f2f2f2 ;
}
效果 图
只给 demo 的顶部 增加 一个 边框 效果 图
解释：通过 border-top 可以只给 div 的顶部 增加 边框而不会影响其它部分的样式。
修改 button 默 认的边框样式
< button class = " btn " > </ button >
.btn {
border-width : px ;
}
效果 图
修改 button 默 认的边框样式 效果 图
解释：左边是 默 认的 button 效果 , 右边 图片 是我们 修改 后的 效果 。
个性化 demo 每个边框的颜色。
.demo {
width : px ;
height : px ;
border : px solid ;
border-top-color : red ;
border-right-color : green ;
border-b ott om-color : black ;
border-left-color : orange ;
}
效果 图
个性化 demo 每个边框的颜色 效果 图
这里千万不能写成 border-right:green;
6. 经验 分享
我们有时候在元素内可能会使用 margin-top 这样的 属性 来让子元素和父元素的顶部有 一个 间隔，但是经常不天遂人愿，发现它并没有达到我们想要的 效果 ，反而变成了父元素距离上 一个 元素 增加 了 一个 距离。如果我们在父元素设置 一个 看不见的 border 就可以 解决 这个问题。
7. 小结
border-width 属性 会有影响设定元素的尺寸。 在 table 中使用 border，要使用 border-xx 这样的 属性 ，为的是去掉一边避免重叠。
td {
border : px solid #ccc ;
border-b ott om : none ;
}
border-color 如果不设置那么它会使用元素中字体的颜色。
div {
widht : px ;
height : px
border-width : px ;
}
上面这样的设置 div 在 页面 中实际站位是 104px，如果不注意很容易造成 页面 错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’ Box -sizing: content- Box ;’，它在 页面 中实际宽度 = width + border ( 该公式仅针对上面例子）。
如果我们需要给 button 设置 一个 颜色，那么它就会失去浏览器 自带 的交互 效果 。
border-top 的使用和 border 的使用 方法 是一样的，如果要个性化 一个 边的颜色，可以这样设置： border-top-color:red; 也可以这样设置： border-top:1px solid red; 。
borderImage 边框图片 ? ?CSS3简介