css揭秘—（2）边框样式（图案边框）

一、border-image设置图案边框

1.案例展示

素材：

<div class="borderBox">
    Bacon ipsum dolor amet eu adipisicing elit tongue ground round ex fatback proident kielbasa ham 
    hock. Sausage beef beef ribs aliquip t-bone mollit. Quis beef tri-tip sunt, cupim ut magna 
    salami t-bone. Ut laboris bresaola 
</div>
.borderBox{ 
    width: 200px; 
    height: 200px;
    margin: 50px auto;
    padding: 10px; 
    background: #ccc; 
    border-radius: 12px; 
    border:1px solid transparent;
    border-image-source:url('./images/border.png');
    border-image-width: 10px; 
    border-image-slice: 10;
    border-image-outset: 20px;
    border-image-repeat: space;
}

效果展示：

1. border-image-repeat: stretch;

2.border-image-repeat: repeat;

3.border-image-repeat: round;//space

边框图案原理：使用九宫格伸缩法，所以素材应该是3*3的尺寸，把图片切割成九块，然后将每块应用到边框的边和角，角的图案不变，边的图案根据border-image-repeat值的不同有不同的效果。

border-image-repeat：

• stretch，拉伸图像来填充区域；
• repeat：平铺（repeated）图像来填充区域。会出现图案被裁掉的情况；
• round：类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域；
• space：似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围。

border-image-slice：九宫格图案四个角展示的尺寸，一般素材宽度/3.

border-image-outset: 边框距离内容之间的距离

2.衍生图案--老式信封边框

二、background设置边框图案

1.案例展示

素材：

<div class="borderBox"> 
    Bacon ipsum dolor amet eu adipisicing elit tongue ground round ex fatback proident kielbasa ham 
    hock. Sausage beef beef ribs aliquip t-bone mollit. Quis beef tri-tip sunt, cupim ut magna 
    salami t-bone. Ut laboris bresaola 
</div>
.borderBox{
    width: 200px; 
    height: 200px; 
    margin: 50px auto;
    padding: 10px; 
    border-radius: 12px;
    border:10px solid transparent; 
    background:linear-gradient(white,white),url('./images/stone-art.jpg'); 
    background-size: cover;
    background-clip: padding-box,border-box;
    background-origin: border-box;
}

效果图：

原理是给两层背景指定不同的background-clip值，padding-box裁剪的白色区域，border-box裁剪的图案部分，需要注意的是border的宽度影响裁剪的宽度。

另外background-origin默认值是padding-box，图片被放在padding-box的原点（左上角），border显示的图案是背景平铺出去的图案，显示看起来是拼接的，因此需要把原点设置到border-box的左上角。

2.衍生图案——蚂蚁行军线