css学习（七）：边框、三角形、自适应正方形

一、border：

• border-style：solid/double；默认是none，不显示边框；（虽然不显示，但是如果有宽度，背景图片定位/隐藏会受影响）；
• border-width：20px;/0 30px;默认值是medium；
• border-color：red/rgba(255,0,255,0.2); 默认是当前颜色；

注意：color的值可以是transparent（透明）；

二、border-image：

border-image 通过指定一张图片来取替 border-style 定义的样式，但 border-image 生效的前提是： border-style 和 border-width 同时为有效值(即 border-style 不为 none，border-width 不为 0)；不过有的可以只设置width（不为0），不设置style（默认none）；

• border-image-source：(none)；none值得时候表示border-image不做任何效果，边框使用 border-style 指定的样式；
• border-image-slice：(100%)；[<number> | <percentage>]{1,4} && fill?；将图片切割成九宫格；（数值不带px）
• border-image-width：(1)；背景图片宽度；既将元素也切割成九宫格；

length 带 px, em, in … 单位的尺寸值
percentage 百分比
number 不带单位的数字；它表示 border-width 的倍数
auto 使用 auto， border-image-width 将会使用 border-image-slice 的值

• border-image-outer：(0)；边框背景扩散;相当于把原来的贴图位置向外延伸。不能为负值； （最后一步渲染）
• border-image-repeat：(stretch)；将图片的九宫格每个单元一一对应放入元素的九宫格；除去4个角外，上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性；

stretch：用拉伸方式来填充边框背景图
repeat：用平铺方式来填充边框背景图，当图片碰到边界时，如果超过则被截断
round：用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框（缩放图片）

注意：

1. border-image-outset 参数一定要在 border-image-width 之后，假设border-image-width缺省，仍然需要在原来 bo