深入理解之border属性（第一期）

一、border-width属性

1. border-width属性不支持百分比值,不会因为设备的尺寸变化而变大（类：outline,box-shadow,text-shadow）
2. border-width支持关键字，thin(1px 细),medium(3px 默认),thick(5px 粗)

二、border-style属性

1. border-style:solid; 经常使用的实线。

.Border{
	border：1px solid #dddddd;
}

2. border-style:dashed;虚线
   注：IE中的虚线边框会比较密

3. border- style:dotted; 点线
   注：IE中的点线是小圆形，Chrome/FireFox是小正方形的

4. border-style:double;双线
   注：双线宽度永远相等，中间间隔±1(兼容性很好)

5. border-style:inset;内凹
   注：价值不高

三、border-color属性

1. border-color的默认值是color。
2. 类似默认的还有box-shadow,text-shadow。

四、border与background定位

1. background定位只能对于左上角
2. 要使定位看上去是对于右边的，可以这样

{
	border-right:50px solid transparent;
	background-position:100% 顶部距离px;
}

这样的原理是用透明的右边边框来代替右边距的距离定位。

五、border与三角图形的构建

1. 三横图标的构建

2. 三角图标的构建

{
	border-width:20px,20px;
	border-style:solid;
	border-color:red transparent transparent transparent;
}

原理如下,所有当没有内容时就会呈现三角形的形状。

溜了溜了

后排提示
之前在慕课看到了这个系列的教程，来自于张鑫旭老师，有兴趣的朋友可以搜索看看，本人在此做一个学习记录。
如果没有描述清楚，可以去慕课查看此课题（免费的哦，因为有钱我都看不起）