CSS border系列
一、border
关于border的3个属性，分别为border-width、border-style、border-color。
其中，border-color默认为元素内容的前景色；border-width默认为关键字medium，但是border-style默认值为none；所以，不指定border-style，边框将不存在。
关于border-color
transparent，据说特定情况下有奇效，需要知道有这样一个可选值。
white，白色的dotted边框，有时候会有奇效。
比如：
更确切地说，应该是颜色与父元素的背景颜色一样的dotted/dashed边框。
8种border-style：
（只有记住了，才能在需要的时候合理使用。）
关于mixed border
利用CSS的层叠，我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色，取决于具体情况。
小tips：边框模拟，等高布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>边框模拟等高布局</title> 6 <style> 7 div.container { 8 margin-left: 200px; 9 overflow: hidden; 10 } 11 12 div.box { 13 width:300px; 14 float: left; 15 16 } 17 18 div.box1 { 19 background-color: brown; 20 border-right: 300px solid green; 21 margin-right: -300px; 22 } 23 24 p { 25 margin-bottom: 50px; 26 } 27 28 </style> 29 </head> 30 <body> 31 <div class="container"> 32 <div class="box box1"> 33 <p>box1</p> 34 <p>box1</p> 35 <p>box1</p> 36 <p>box1</p> 37 <p>box1</p> 38 <p>box1</p> 39 <p>box1</p> 40 </div> 41 <div class="box box2"> 42 <p>box2</p> 43 <p>box2</p> 44 <p>box2</p> 45 </div> 46 <div class="container"> 47 </body> 48 </html>
其实现原理为：左列边框宽度与margin负值相结合，让右边框成为右列的背景。
二、border-radius
语法规则：
border-radius:a b c d; 顺序依次为上左、上右、下右、下左。（顺时针方向）
border-radius:a b c d/a b c d ;第一组为水平数值，第二组为垂直数值。
border-top-left-radius:a b; 单个圆角的设立。
（定义单个圆角时，一定要先上下、后左右，否则无效。）
注意：
圆角生效并不以边框的存在为前提，也就是说，即使没有边框，也能设立圆角。
小tips：border-radius:50%
三、border-image
与border-radius不同，border-image以border的存在为前提；其本质是将border-style替换成image。
语法规则：
border-image-source
支持none和url两种选择；（如果是none的话，下面就不用看了。。。）
border-image-slice
按top、right、bottom、left的顺序指定九宫格的切法；支持纯数字和百分数。
（纯数字自带px单位；百分数以图像的宽高为基准计算。）
fill，可选；默认情况下第九区是不显示的；指定了fill才会显示出来；在border-image-slice中指定。
border-image-width
按top、right、bottom、left的顺序指定border-image-width，覆盖border-width；可选。
经测试，border-image-width大于border-width时，会向内扩展（外面那条线不变，向里面扩展增加宽度），但是只是它的独角戏，除了它自己发生了变化之后，其它任何东西都不会变化；它会侵入padding区甚至内容区。
border-image-width小于border-width时，会向外收缩（外面那条线不变，里面这条线向外收缩），与padding区或者内容区留出空隙。
可以为0，即border-image不存在；但不能为负值。
（个人建议，此属性看看就好，就让它默认等于边框的宽度吧。）
border-image-outset
按top、right、bottom、left的顺序指定图像向外移动的距离；可选；支持像素距离和纯数字。
像素距离好理解，20px就是移动20px的意思；纯数字是指border-width的倍数。（注意，是border-width，不关border-image-width的事。）
请注意，这里用的是移动这个词，并不是扩展。
border-image-repeat
按top、right、bottom、left的顺序指定如何填充边框的空白；接受两个值，一个水平方向，一个垂直方向。
默认stretch（拉伸），可选repeat（重复）和round（平铺）。
这里只是一些我对这些属性使用方法上的总结，并没有对属性本身的含义与机制作出说明。
关于这5个属性的具体说明，推荐一篇文章，css3:border-image边框图像详解，写得很好，非常仔细，我这么小白都看懂了。
outline
outline-width、outline-style、outline-color；语法和表现都和border一样，但是不占任何文档空间。
outline-offset，定义outline和border（padding、content area）的距离，与margin没有关系。
四、box-shadow
语法规则：
h-shadow（必需，水平阴影的位置，可负）；
v-shadow（必需，垂直阴影的位置，可负）；
blur（可选，模糊距离）；
spread（可选，阴影的尺寸）；
color（可选，阴影的颜色）；
outset（默认）/inset（可选，将外部阴影改为内部阴影）。
box-shadow应用
CSS：
1 .container { 2 width:200px; 3 height:100px; 4 background-color: #ccc; 5 border:10px solid red; 6 border-radius: 10px; 7 box-shadow: 0 0 0 10px green; 8 }
效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body { 8 margin:0; 9 } 10 11 .container { 12 width:200px; 13 margin: 0 auto; 14 box-shadow: 0 4px 8px rgba(0,0,0,0.3),0 8px 16px rgba(0,0,0,0.5) ; 15 } 16 17 p { 18 position: absolute; 19 margin: -40px 0 0 50px ; 20 } 21 22 </style> 23 <body> 24 <div class="container"> 25 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:200px;height:300px" /> 26 <p>I am "萌萌哒".</p> 27 </div> 28 </body> 29 </html>
