上面这样的设置 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 Modal HTML结构
<ul><li><a href="#modal-show" title="CSS Modal">CSS Modal</a></li></ul><section class="modal--show" id="modal-show" tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true"><div class="modal-inner">
<header>
<h2 id="label-show">CSS Modal—纯CSS实现模态窗口</h2>
</header>
<div class="modal-content">
<p>今天介绍一个用CSS实现模态窗口的插件——CSS Modal ，利用它可以很方便的实现模态窗口。它可以用来展示任意的HTML内容，并且支持响应式设计，具有良好的兼容性，通过它的js扩展，还能实现更强大的功能。</p>
</div>
<footer>
<p>by ZJIAN</p>
</footer>
</div>
<a href="#!" class="modal-close" title="Close this modal" data-dismiss="modal" data-close="Close">×</a></section>
这是它最基本的使用方法，点击ul标签中的CSS Modal就会弹出section标签中的内容，如果你想使用更高级的功能，比如相册的展示、视频等等功能，CSS Modal也提供了解决方案，需要引入plugins中对应的js文件。
