上面这样的设置 div 在页面中实际站位是 104px，如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box’，它在页面中实际宽度 = width+border( 该公式仅针对上面例子）。
border-image-source背景图片源
border-image-slice需要展示出来图片的尺寸，如果这个量等于图片的尺寸就都相当于整个图片展示出来
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图片的填充形式
这个属性的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的一个很强大的属性，因为它可以自定义漂亮的边框，而不在是单调的线条。
这个属性使用并不太难，不过其中的border-image-slice属性在使用的时候有一个小技巧，就是当想要其中 image 不失真即不拉伸，slice 要和 width 一样。
例如：
.demo{border-width:20pxborder-image-slice:20}
.demo2{
width: 100px
height: 100px
background: #ccc
border-width: 20px
border-style: solid
border-image-source: url(./../img/border-image.jpg)
border-image-slice:20
border-image-outset:22px
border-image-repeat: repeat
}
order-image 使用时候一定要设定 border-style 虽然这个属性没什么用，但是如果不设定它 border-image 就不生效。
border-image-slice 如果设定数值当 px 用时候直接写数字就可以 如果加上 px 反而会不生效。
border-width 用来设定边框的宽度，它决定图片边框展示的厚度(即围绕宽度)。
不要让 border-radius 的 % 值大于 50，因为如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。
如果用 rem、em 单位在移动端用border-radius 画圆，在部分机型里面是椭圆的问题，可以通过 50% 来解决 ，或者使用 px 配合缩放 scale 来实现 rem 单位的效果。
在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span 标签的圆角不一样因为 % 是参考长和宽计算的。
border-radius 圆角并不会隐藏标签内部元素的内容，如果有内容溢出的情况记得增加overflow:hidden
任何元素都可以使用这个属性,包括视频、音频标签等。
一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。
使用这个属性可以让页面更有立体感，给元素添加一个阴影，使得元素看起来是悬浮在原来的位置，下面就看看它的用法吧。
效果如下图
它主要用来告诉浏览器怎么计算元素的展示宽高的。
推荐大家设置 box-sizing 为border-box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。如果不设置 box-sizing 不同浏览器会有不同的计算方式。
有四种方法可以实现圆角。第一、直接写CSS代码：border-radius
例如：border-radius:4px或者可以四个不同圆度：border-radius:4px 4px 3px 3px
顺序是左上角，右上角，右下角，左下角
第二、四个圆角贴图；制作四个圆角的图片，然后用css定义
第三、直接制作整个圆角矩形背景
第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。
<b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b
class="r4"></b></b>
<b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b
class="r1"></b></b>
<b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b
class="rb4"></b><b class="rb5"></b></b>
<b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b
class="rb2"></b><b class="rb1"></b></b>
围观一堆坑货。人家说的是CSS实现。
CSS3以下的是几乎无法实现的(可以利用.HTC这种古董东西)
实现代码(简化过了，只包含关键代码，不可直接使用)：
<!DOCTYPE html><!-- 上面的DocType是HTML5声明防止某些浏览器不识别，旧版本IE(低于或者等于IE8)无效 -->
<div class="outer">
<div class="inner">
</div></div> .outer {
background:pink
width:100%height:100%
position:relative
}
/* 为了实现透明效果我们要有个背景 */
.inner {
background:black
width:300pxheight:300px
position:absolute
border-radius:100%
behavior:url(yourbehavior.htc)
}
/* 用CSS3新特性圆角来做出圆形效果，border-radius设定为100%为完全圆角(把整个元素变成椭圆形，如果是像素则会制作出一个绝对正圆的圆角，类似圆角长方形或者香肠形)。
宽高必须相等才是正圆。
位置相对定位来保证圆的位置，本例随便做的位置。
behavior是IE低版本的一个绘图功能组件，现在网上有许多可以现成使用的behavior，例如PIE.htc，挑选一个能实现圆角效果并且最适合你的插件来安装使用 */
当然，PNG实现是最简单的，也是最不负责的
