边框图片
- 功能:将图片规定为包围 div 元素的边框
a) 定义和用法: border-image 属性是一个简写属性,用于设置以下属性
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
b) 属性说明:
值 描述
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移—裁切。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
效果展示:
技巧:
1.把height设置成auto;
2.巧用border-image属性
气泡是一个背景图。
/* border-image-source: url(“images/btn_bg.png”);
border-image-slice:10 fill;设置四个方向上的裁切距离
border-image-width: 10px;
border-image-repeat: stretch ; */
代码:
<!DOCTYPE html>
<html lang=&#