上面这样的设置 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 不同浏览器会有不同的计算方式。
新建一个html文件，命名为test.html，用于讲解CSS实现文本框怎么下移。在test.html文件内，使用div标签创建一个模块，并设置div的class属性为mydiv，主要用于下面通过该class来设置css样式。在test.html文件内，在div标签内，使用input标签创建一个文本框，并设置input的id属性为myinput。在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内在css标签中，定义类名为mydiv的样式，使用border设置div的边框为1px灰色边框，使用width设置div的宽度为400px，使用height设置div的高度为200px。在浏览器中打开test.html文件，查看文本框未下移前的效果。在css标签内，定义id为myinput的样式，使用margin-top设置文本框下移20px。在浏览器打开test.html文件，查看实现的效果。.tl {
width: 240px
height: 193px
position: absolute/*这里一定要设置*/
z-index: 999999/*这里是该元素与显示屏的距离，据说越大越好，因为没有它也是可以的*/
margin-top: 20%
margin-left: -209px
background-image :url("/ship_three/images/tl.png")
-webkit-transition: .5s ease-in-out/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
-moz-transition: .5s ease-in-out/*这里为了兼容其他浏览器*/
-o-transition: .5s ease-in-out
background-image: url("/ship_three/images/tl.png")
}
可以，没问题CSS代码就是上面的。
扩展资料：div中style使用css代码
div中可以直接写CSS样式代码，只需要DIV代码（标签）中使用style属性即可直接写CSS样式。
DIV代码：
<div style="color:#F00border:1px solid #000width:300pxheight:100px">你好 DIVCSS5</div>
完整案例代码与效果截图：
完整HTML案例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>DIV直接写CSS DIVCSS5案例</title>
</head>
<body>
<div style="color:#F00border:1px solid #000width:300pxheight:100px">你好 DIVCSS5</div>
</body>
</html>
div标签内常用属性列表
1、style 设置css样式(扩展了解style标签)
2、align 设置div盒子内的内容居中、居左、居右
3、id 引人外部对应#（井号）选择符号样式
4、class 引人外部对应.（句号）选择符号样式
5、title 设置div（标题）鼠标经过时显示文字（扩展了解 title标签）
参考资料来源：DIV-百度百科
