css3边框图片

1、功能：将图片规定为包围 div 元素的边框

定义和用法： border-image 属性是一个简写属性，用于设置以下属性

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

属性说明：

• border-image-source： 用在边框的图片的路径。
• border-image-slice： 图片边框向内偏移—裁切。
• border-image-width： 图片边框的宽度。
• border-image-outset： 边框图像区域超出边框的量。
• border-image-repeat： 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

2、案例：任意拉伸的按钮：通过一个按钮的背景图片制作出任意大小的按钮，实现背景填充效果：

1.效果：

2.代码：

.downLoad{
    width:80px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    /*设置图片边框背景*/
    border-image: url("../images/btn_bg.png");
    /*设置裁切区域，同时设置填充模式*/
    border-image-slice: 10 fill;
    /*设置边框的大小，这个一般与裁切区域大小一致，否则就发生缩放*/
    border-image-width: 10px;
    /*设置边框的重复模式*/
    border-image-repeat: round;
}

前端进阶精选：点此去