css 用图片作为边框的事例分享

      小编在进修 css 的过程中经常会用到  div 或者其他有边框的元素进行区域的划分，但教员讲解了 边框 不仅可以用线条着一种体例来闪现，还可可以用图像作为边框，这一结果感受挺适用的所以分享给大师；

工具/原料

• 电脑
• Sublime text 2

方式/步骤

1. 1

   首先我们找到先建立一个静态页面，在 body 里面直接写入一个 div（比力常见）很是简单的用div的边框来演示；

   
2. 2

   我们先正常的为 div 设置一下 宽和高 还有边框属性，页面位置（这里 margin是为了让div 在网页居中，边框的厚度就宽一点。颜色选红色）

   
3. 3

   然后我们实现如图一的结果，关头在于

   border-image属性，url 按照路径获取图像，12 是切取图像的边距（具体的百度诠释有点绕口）之后 round（程度铺满） stretch（垂直拉伸）

   
4. 4

   第二个则是跟改变一下 程度 和  垂直的结果；

   即使  stretch（程度拉伸）   stretch（垂直拉伸）

   （还有一个属性  repeated  平铺；）

   
5. 5

   第三个结果则是 节制 一下边距的细节达到的;

   border-imag：url A B C D;对应的就是 上 右 下  左；

   

注重事项

• 仅作分享；