总结自慕课网：https://www.imooc.com/learn/755
-
border-width为什么不支持百分比
视频中作者的理解是：手掌大小iPhone手机边框和两个人脸大小的显示器的边框是一样大的，不存在说因为尺寸变大而边框变大。
个人理解：width属性具有继承性，假设父元素100px；子元素设置50%，则为50px；而border-width不具有继承性，如果使用百分比，浏览器解析时应该向谁作为参考对象呢，所以只能用指定大小来确定。
类似不支持百分比的有：outline,border-shadow,text-shadow
border-width还支持关键字：thin(1px)；medium(3px)（默认值）；thick(5px)
-
各种border-style类型
border-style:solid; //实线
border-style:dashed; //虚线
不同浏览器虚线的实色区域宽高比不同： Chrome/FireFox:(3:1); IE:(2:1);
border-style:dotted; //点线
不同浏览器表现有差异：Chrome/FireFox:小方; IE:圆;
border-style:double; //双线
三条杠的图案就可以通过一个div和border来实现
border-style:inset; //内凹
border-style:outset; //外凸
border-style:ridge; //山脊
border-style:groove; //沟槽
border-color默认颜色就是color
border-color默认颜色就是color
当border-color为指定颜色时，color设置什么颜色border-color就会是什么颜色，类似的还有box-shadow,text-shadow等
实际应用：鼠标经过时边框和中间十字均变色
css2.1background的定位只能相对于左上角数值定位，不行相对右下
那么如果要在css2.1实现相对有边缘定位呢
三角形的实现网上有很多教程了，在此就不详细说了，主要原理就是讲宽高设置为0；然后将部分border的颜色设置成透明
再设置好border的宽度，即可实现各种形状的三角形。
drop-shadow滤镜还可以给元素或图片非透明区域添加投影。
原理如下：
对于背景透明的 png 小图片而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图片了吗？
然后，我们把原始图片隐藏在容器外面，投影图片在容器中间，给人的感觉就是换了颜色的图片。
但是在Chrome浏览器下页面中不可见元素的drop-shadow也是不可见；但是如下图
等宽布局 ；缺点不支持百分比宽度
-
border与color
-
border与background定位
-
border与三角等图形构建
-
border与透明边框
-
border在布局中的应用