之前写了一篇文章，介绍了基于CSS渐变来实现切角效果的方法。今天再来介绍另一种方法，即使用border-image+SVG的方式来实现切角效果。

border-image的工作原理

给一个元素设置边框，我们会使用border这个属性。border是border-width、border-style、border-color等3个属性的简写形式。

我们给div设置一个宽20px、实线、颜色为#58a的边框。

    div{
        width:200px;
        height:150px; 
        margin:20px auto;
        border:40px solid #58a;
    }

border-image是CSS3的新属性，用于指定元素边框的背景图片。使用 border-image 时，border-style属性所设置的边框样式solid、dashed或dotted将不起作用。

border-image属性也是一个简写：包含border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat等5个属性。

1. border-image-source:

从这个属性的英文命名，我们就可以知道它表示的是边框背景图片资源的路径，默认值是none。

    div{
        width:200px;
        height:150px;
        margin:20px auto;
        border:40px solid #58a;
        border-image-source:url(/images/adamcatlace.jpg);
    }

2. border-image-slice:

border-image-slice属性指定图像的边界向内偏移。

    div{
        width:200px;
        height:150px;
        margin:20px auto;
        border:40px solid #58a;
        border-image-source:url(/images/adamcatlace.jpg);
        border-image-slice:10% 20% 30% 40%; 
        border-image-repeat: none;
    }

    div{
        width:200px;
        height:150px;
        margin:20px auto;
        border:40px solid #58a;
        border-image-source:url(/images/adamcatlace.jpg);
        border-image-slice: 10% 30%;
    }

    div{
        width:200px;
        height:150px;
        margin:20px auto;
        border:40px solid #58a;
        border-image-source:url(/images/adamcatlace.jpg);
        border-image-slice: 30 30% 45;
    }

    div{
        width:200px;
        height:150px;
        margin:20px auto;
        border:40px solid #58a;
        border-image-source:url(/images/adamcatlace.jpg);
        border-image-slice: 7 12 14 5; 
    }

    div{
        width:200px;
        height:150px;
        margin:20px auto;
        border:40px solid #58a;
        border-image-source:url(/images/adamcatlace.jpg);
        border-image-slice: 10% fill 7 12; 
    }

    .demo{
        border:30px solid transparent;
        border-image:1 url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="red">\
              <polygon points="0,1 1,0 2, 0 3, 1 3, 2 2, 3 1, 3 0, 2"/>\
            </svg>');
    }