边框图片
- 功能：将图片规定为包围 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="en">
<head>
<meta charset="UTF-8">
<title>聊天气泡大小自适应</title>
<style>
div {
width: 200px;
height: auto;
border:10px solid;
/* border-image-source: url("images/btn_bg.png");
border-image-slice:10 fill;设置四个方向上的裁切距离
border-image-width: 10px;
border-image-repeat: stretch ; */
border-image: url("images/btn_bg.png") 10 fill / 10px stretch;
}
</style>
</head>
<body>
<div>聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应聊天气泡大小自适应</div>
</body>
</html>
本文属个人学习整理记载