2015-12-13复习之CSS3 border 详解border-image

先来提一下我们所熟知的border最基本的属性：

border-width，border-style，border-color

不要小看border，它还可以“画”出三角形，平行四边形，五角星，甚至心形哦

先上图：

神奇吧？其实只用border做到的，看到下面这张图和其相应代码，你肯定就明白了

.bord{
            width: 100px;
            height: 100px;
            border-left: 10px solid salmon;
            border-right: 10px solid yellow;
            border-top: 10px solid cornflowerblue;
            border-bottom: 10px solid aquamarine;
        }

但是不要想当然的以为只要设置其中一边的border就可以了，这样是画不出三角形的

需要设置三边的border，可将其中两边设置为透明色，注意，容器的宽高要设置为0

想要设置为右三角，将上下边框设置为透明就可以了
这里只是简单介绍了三角形的绘制方法，还有更多图形这里不做介绍，下面放俩链接干货

https://css-tricks.com/examples/ShapesOfCSS/

http://apps.eky.hk/css-triangle-generator/zh-hant

此外border-radius所展示的圆角效果让我们的网页变得不再死板

你可以只用一个属性值将其设置为每个角一样的弧度甚至是正圆

也可以用四个属性值，分别设置每个角的弧度，方向是左上，右上，右下，左下，顺时针方向。

在css3中还有一个关于border的新属性，就是border-image。

在处理段落的背景图片时，相信大家也遇到过这样的问题，随着段落的大小，要制作不同大小的图片来适应。这样费时又费力，于是九宫格出现了。以前是要做9个容器来分别承载内容和四周背景图，这样未免太过麻烦，border-image很好的解决了这个问题，只需要一个容器和一张图片。

先来看看效果吧，是不是很酷呢？

<div class="c">你好啊你好啊</div>

.c{
            width: 200px;
            font-size: 20px;
            border-width: 50px 50px 50px 50px;
            -webkit-border-image: url("9.png") 50 50 50 50;
        }

现在我们来慢慢解析border-image的使用方法

为了更容易的看，我把原图制作成下面这个样子（其中四个角阴影部分的宽高都是50px）

那么同样还是上面的代码得到的效果图就是

可以看到除了四个角没有变化之外，其余部分都拉伸了，这也是九宫格的精髓所在。

那么border-image的每个参数分别是什么意思呢？

border-image共有三个属性：

图片（border-image-source）、剪裁位置（border-image-slice）、重复性（border-image-repeat）

• 图片：使用URL调用
• 剪裁位置：共有1~4个参数，没有单位（默认是像素），也可以用百分比
  • 第一个参数a：距离上边相应长度进行裁剪
  • 第二个参数b：距离右边相应长度进行裁剪
  • 第三个参数c：距离下边相应长度进行裁剪
  • 第四个参数d：距离左边相应长度进行裁剪
  • 还是上图吧：      
  • 根据四个参数就可以确定四个角的裁剪区域，这四个区域不会失真，分别位于容器的四个角，其余还有5个格子，中间的格子就是放置内容的地方，其余四个格子会以平铺或者重复的方式进行布置（就是下面要讲的重复性）
  • 剪裁位置参数是1~4个。1个参数代表上下左右裁剪的都是这个值；2个参数代表"上下，左右"；三个参数代表"上，右左，下"；4个参数代表"上，右，下，左"。
• 重复性：有三个参数 stretch（默认值），round，repeat
  • 默认值是stretch，拉伸的意思，可以看到上面的效果图中，“2”是垂直拉伸的，“>”是水平拉伸的，而中间的格子是水平垂直一起拉伸的。
  • round是平铺
  • repeat是重复
  • 图片说话：
  • 两者还是有差别的，以下为个人理解，可参考
    • round在这里可以理解为：将当前的内容长宽均分成若干小份，使得每个小份都大概可以放得下原来裁剪剩下的格子（">"或者"2"）,至于每个小份的大小是不是和之前所剩格子宽高是否有出入就不再考虑了。所以明显看到上图中左边的箭头大小是和右边不一样的。
    • repeat在这里可以理解为：将">"从中间开始向左右两边重复，大小和原来裁剪剩下的格子大小一致，所以难免会遇到重复到边缘的时候位置不够了，这个时候就会显示一种剪切掉的状态。
    • 来一张图更好的理解：
    • 重复性参数是0~2个。0个就是不写，代表横着竖着都是stretch；1个参数代表横竖都是这个值；2个参数代表"横着的重复性，竖着的重复性"。