css基础--border属性

1、border不支持百分比
border-width还支持若干关键字，
thin：薄薄的，等同于1px。
medium（默认值）：薄厚均匀，等同于3px。
thick：厚厚的，等同于4px。
border属性的默认宽度大小是medium，
2、border-style:默认none;
实现一个没有下边框的边框效果：

div {
border: 1px solid;
border-bottom: none;
}
或者
div {
border: 1px solid;
border-bottom: 0;
}

这样写渲染性能更高：

div {
border: 1px solid;
border-bottom: 0 none;
}

border-style:solid为显示实线。
border-style:dashe为虚线，不过这虚线颜色区的宽高比以及颜色区和透明区的宽度比例在不同浏览器下是有差异的。在Chrome和Firefox浏览器下，颜色区的宽高比是3:1，颜色区和
透明区的宽度比例是1:1。
border-style:dotted显示为虚线圆点，虚点边框在表现上同样有兼容性差异，虽然规范上明确表示是个圆点，但是Chrome以及Firefox浏览器下虚点实际上是个小方点。
所周知，CSS圆角属性border-radius从IE9浏览器才开始持，
IE8这些浏览器要想实现圆角，要么用图片要么使用复杂生涩的VML，但是，dotted类型边框天然就是一个圆，那我们要想在IE8浏览器下实现圆角效果，是不是就轻松多了呢？

.dotted {
width: 150px; height: 150px;
border: 149px dotted #cd0000;
}

border-style:double双线边框，顾名思义，即两根线且为实线
当边框宽度是1px和2px的时候，其表现和border-style:solid是一模一样的：当边框为3px的时候，才开始有双线边框的表现，包括retina屏幕也是如此，因为边框宽度是没有半像素的概念的。还记不记得上一节留下的问题，“为什么border-width
的默认值是media（3px）？”答案就在这里，虽然说实际开发的时候1px大小的solid类型边框是最常用的，但是却无法让
double类型边框有合乎语义的表现，因此使用了能表现double
类型的最小边框宽度3px作为边框宽度默认值。

.icon-menu {
width: 120px;
height: 20px;
border-top: 60px double;
border-bottom: 20px solid;
}

3、border-color有一个很重要也很实用的特性，就是“border-color默认颜色就是color色值”。具体来讲，就是当没有指定border-color颜色值的时候，会使用当前元素的color计算值作为边框色，具有类似特性的CSS属性还有outline、box-shadow和text-shadow。
实现如下右边添加元素：

核心CSS代码如下：

.add {   border: 2px dashed #ccc; } 
.add:before, .add:after {   background: #ccc; } 
/* hover变色 */ 
.add:hover {   border-color: #06C; } .add:hover:before, .add:hover:after {   
background: #06C; }

功能没有任何问题，唯独当我们hover变色的时候，需要同时重置3处（元素本身以及两个伪元素）颜色。实际上，如果这里不是使用background-color，而是使用border来绘制加号，则代码要简单得多。

.add {   color: #ccc;   border: 2px dashed; } .add:before {   border-top: 10px solid; }
.add:after {   border-left: 10px solid; } 
/* hover变色 */ 
.add:hover {   color: #06C; }

使用border实现，我们hover变色的时候，只需要重置1处，也就是重置元素本身的color就可以了，因为整个图形都是使用border绘制的，同时颜色缺省，所以所有图形颜色自动跟着一起变了。
4、border与透明边框的技巧
1）右下方background定位的技巧，假设现在有一个宽度不固定的元素，我们需要在距离右边缘50像素的位置设置一个背景图片，此时background属性就遭遇尴尬了：由于宽度不固定，所以无法通过设定具体数值来实现我们想要的效果，因为background是相对左上角定位的，我们的需求是右侧定位。要实现上面的需求，方法挺多。其中一种方法就是使用透明边框，如下CSS代码：

.box {   
border-right: 50px solid transparent;   
background-position: 100% 50%; }

默认background背景图片是相对于padding box定位的，也就是说，background-position:100%的位置计算默认是不会把border-width计算在内的
2）增加点击区域
首推透明border方法，原因很简单，假设我们的图标是使用工具生成的，那么background-position就是限定死的值，若再使用padding撑开间距，就会遇到定位不准的问题。但是，若是使用透明border增加点击区域，则无此问题，只要合并时留下足够的间距就可以了

.icon-clear {  
 width: 16px;  
  height: 16px;   
  border: 11px solid transparent;   ... }

3）三角形绘制
朝下的等腰三角形

div {   
width: 0;   
border: 10px solid; 
border-color: #f30 transparent transparent; 

5、border图形绘制

div {
width: 10px; height: 10px;
border: 10px solid;
border-color: #f30 #00f #396 #0f0;
}

如图所示

将左右和底部颜色变成透明色

div {
width: 10px; height: 10px;
border: 10px solid;
border-color: #f30 transparent transparent;
}

就变成这样

此时，再进一步，宽度从10px变成0，是不是上面梯形下方的开口也就从10px变成0了

div {    
width: 0;    
border: 10px solid;    
border-color: #f30 transparent transparent; 
 }

如图所示：

我们还可以让垂直方向的边框宽度更宽一点，这样三角形就会更加狭长

div {   
width: 0;    
border-width: 10px 20px;     
border-style: solid;    
border-color: #f30 transparent transparent; 
} 

又或者是仅仅让两个方向的边框透明

div {    
width: 0;    
border-width: 10px 20px;     
border-style: solid;    
border-color: #f30 #f30 transparent transparent; }

如图所示：

甚至我们可以借助border生成梯形形成圆角

6、border等高布局技术

.box {   
border-left: 150px solid #333;   
background-color: #f0f3f9; } 
.box > nav {   
width: 150px;   
margin-left: -150px;   
float: left; } 
.box > section {    overflow: hidden; }

左侧深色背景区域是由border-left属性生成的。元素边框高度总是和元素自身高度保持一致，因此可以巧妙地实现等高布局效果。此方法要想生效，有一点需要注意，父级容器不能使用overflow:hidden清除浮动影响，因为溢出隐藏是基于padding box的，如果设置了overflow:hidden，则左浮动的导航列表元素就会被隐藏掉。
border等高布局也有局限性，首先不支持百分比，且最多支持2-3栏布局。