最近项目要做一个h5聊天页面，原本，我打算用定位小三角的方式实现聊天气泡的小尾巴，可是同事提出了一个问题：“你这么写，如果气泡要换肤怎么处理？”

嗯，这个，我竟无言以对。

那么问题来了，譬如qq中的聊天气泡，可以任意换肤，究竟是怎么实现的呢？这就非常有意思了，我们为何不去尝试和探索呢。于是乎，本文的keyword闪亮登场了，就是它：border-image

一、先睹为快

border

二、如何实现

我们直接忽略前戏，咳～咳，我就是这么直接。

方式一：制作小三角定位实现气泡；


html:
1
<div id="arrow">小三角制作的气泡</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#arrow{
    border-radius: 2px;
    background-color: #ff8851;
    color: #fff;
    position: relative;
    margin-left: 2%;
    height: 45px;
    line-height: 45px;
    padding: 0 2%;
    display: inline-block;
}
#arrow:before{
    position: absolute;
    content: "\00a0";
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #ff8851 transparent transparent;
    top: 50%;
    margin-top: -15px;
    left: -25px;
}

这里在啰嗦一下，关于如何绘制三角箭头：


html:
1
<div id="triangle"></div>

css:

1
2
3
4
5
6
7
#triangle{  
    height:0px;  
    width:0px;  
    border-width:25px;  
    border-style:solid;  
    border-color:red yellow blue green;  
}

思路很简单，除了要显示色块的箭头，其他border-color均设置为transparent

方式二：旋转矩形实现气泡尾巴；


html:
1
<div id="rectangle">旋转矩形制作的气泡</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#rectangle{
	border-radius: 2px;
    background-color: #ff8851;
    color: #fff;
    position: relative;
    margin-left: 2%;
    height: 45px;
    line-height: 45px;
    padding: 0 3%;
    display: inline-block;
}
#rectangle:before{
    position: absolute;
    content: "\00a0";
    width: 15px;
    height: 15px;
    top: 50%;
    left: -7px;
    background: #ff8851;
    transform: rotate(-45deg);
    margin-top: -10px;
    border-radius: 2px;
}

为了让箭头垂直居中，我们通过：正方形斜边长除以2，也就是(15*√2)/2≈10

方式三：border-image实现；


html:
1
<div id="stretch">使用border-image来实现</div>

css:

1
2
3
4
5
6
7
8
9
#stretch{
    border: 15px solid transparent;
    display: inline-block;
    border-image:url(pic2.png) 15 30 stretch;
    -moz-border-image:url(pic2.png) 15 30 stretch;	/* Old Firefox */
    -webkit-border-image:url(pic2.png) 15 30 stretch;	/* Safari and Chrome */
    -o-border-image:url(pic2.png) 15 30 stretch;	/* Opera */
    color: #fff;
}

三、探索

拼凑或旋转定位法：

  • 思路简单，容易实现
  • 部分安卓手机刷新加载的时候，会先加载出气泡的小尾巴，此时就略显尴尬😅

border-image法：

  • 简易切换皮肤，多样化
  • 相对麻烦，裁切数值需要手动调至最优

引深：点9切图；

即 .9 ，是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png
智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。


这里的border-image原理其实和点9图片原理十分相似。

四、发现

我们先来看一张图，理解一下：

如上图所示：我们将图片分成了9个区域，1-3-7-9区域作为边框的四个角，2-4-5-6-8则为填充部分，qq中实现的换肤，奥秘就藏在这里。

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

  • border-image-source：用在边框的图片的路径
    • url(temp.png)
  • border-image-slice：图片边框向内偏移，类似于margin，分别表示上右下左
    • 15 15 15 15
    • 10 fill(fill为可选属性，假如指定了，那么中间的区域就会有，否则则为透明)
  • border-image-width：图片边框的宽度
  • border-image-outset：边框图像区域超出边框的量
  • border-image-repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

如果省略值，会设置其默认值。

举个🌰：

1
border-image-slice:27 27 27 27

border
可以看到，我们按照上－右－下－左的顺序对图片进行了偏移，动图来自这里。

再举个🌰，我们来个图片分析：
border

五、关于repeat和round

看完上面的参数介绍，你可能会和我一样，产生这样的疑惑：“repeat和round有啥区别？平铺or铺满？”
这就对了，我觉得还是有必要了解一下，于是，找到了这样的解释：

repeat是将四个角做水平和垂直方向的复制，如果角的图案太小，可能会铺出半截图片的情况；round则不同，将四个角等分，每个角图填充铺满空隙；

可能不是很直观，我们来用示例结合图片来说明：

六、收尾

在使用border-image之前，一直有些顾虑。众所周知，移动端的h5兼容问题层出不穷，我们要照顾好广大android用户。值得欣慰的是，该css3属性对移动端的兼容非常好，经测试，完美通过。

so，大胆的使用border-image去做一些有创造性而又有趣的事情吧～

参考：
http://www.w3school.com.cn/cssref/pr_border-image.asp
http://www.360doc.com/content/14/1016/13/2792772_417403574.shtml
http://baike.baidu.com/