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

工具/原料
- 电脑
- Sublime text 2
方式/步骤
- 1
首先我们找到先建立一个静态页面,在 body 里面直接写入一个 div(比力常见)很是简单的用div的边框来演示;

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


- 3
然后我们实现如图一的结果,关头在于
border-image属性,url 按照路径获取图像,12 是切取图像的边距(具体的百度诠释有点绕口)之后 round(程度铺满) stretch(垂直拉伸)



- 4
第二个则是跟改变一下 程度 和 垂直的结果;
即使 stretch(程度拉伸) stretch(垂直拉伸)
(还有一个属性 repeated 平铺;)


- 5
第三个结果则是 节制 一下边距的细节达到的;
border-imag:url A B C D;对应的就是 上 右 下 左;


注重事项
- 仅作分享;







