css3中边框的总结

css3中边框的总结

css3中的很多方法很好用，减少了在以前只能用ps来拼图，比如圆角……不过要注意的就是兼容的问题；

1. border-radius（对边框圆角）//可以用数值或者百分比
   
   1. border-radius：属性是一个简写的属性，
   2. 如果后面带一个值，表示四个角都按那个值来倒角，
   3. 如果是两个值，前面那个值是左上/右下，后面那个是右上/左下；（带三个值，四个值）
   4. border-bottom-right-radius: 4em 0.5em;对单个角的控制这是（下面，右面）那个角；
      
      1. 上面的后面那个值，是垂直方向的值，如果等于前面那个值，那么就是正规的倒角，如果小于前面那个值，则在正规倒角的位置下移，反之……
2. box-shadow
   
   1. box-shadow: h-shadow v-shadow blur spread color inset;
   2. 前两个参数为必填（可为正负，改变阴影的位置），
   3. 第三个参数是模糊的程度；（可填）
   4. 第四个参数是阴影的尺寸；（可填）
   5. 第五个是阴影的颜色；（可填）
   6. 第六个是将外部阴影改成内部阴影；（可填）
3. border-image
   
   1. border-image-source
      
      1. url（）
   2. 图片剪裁位置(border-image-slice)
      
      1. 支持数字和百分比，如果是四个数（上、右、下、左），三个，两个，一个；
   3. 重复性(border-image-repeat) round（平铺）和stretch（拉伸）。其中，stretch是默认值。
      
      1. 平铺可能会改变了原图片显示的大小（图形完整），重复不改变图片显示的大小（最后可能会有半截图：就像给地板贴瓷砖，最后多余的会切掉）。
      2. border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;（后面两个stretch可以任意改：30% 40% stretch repeat;）