鑫的第七章

重复平铺很有美感，但有时我们希望实现随机性的展示，因为自然界中的事物都不是以无限平铺的方式存在。就像没有两朵花是完全一样的，所以我们会试图让背景图案尽可能显得自然，这篇我们就来试试。

背景边框 在一些情况下，我们想把一个图片应用为边框，而不是背景。这要如何实现，border-image是否可以实现，这篇来带大家了解。

除了条纹图案，还会有很多其他不同类型的图案，如网格、波点、棋盘等。 几乎可以使用 CSS 创建任何种类的几何图案，只不过有时这样不太实际。

background-origin ：指定背景图像的定位区域， background-clip ： 指定背景图像的绘画区域。

border-image 就是给元素边框添加背景图片，是一个简写属性，border-image 是通过展示成图片来代替 border-style 的样式。

在我们开发中，经常会有各种尺寸、颜色、角度的条纹图案需要实现， 以前，我第一个想到的就是用无序列表添加元素，再去控制不同颜色，这样再改动的时候就太麻烦，根本不够 DRY，而用线性渐变的方法就会简单很多

有时，会有内侧圆角，外侧直角的需求。 可以简单的使用两个元素实现： 这个写法就需要使用两个元素，而我们如果只用一个元素，该如何达成这样的效果。

因为多重边框在 CSS 工作组被认为没有足够多的使用场景，border 这个属性是没办法直接实现这个效果，因此，就会想另辟蹊径的去实现，最简单的就是多个div去模拟实现，这个是最容易想到的办法。

对于容器内的背景图做偏移定位，在 CSS 2.1 中，只能指定距离左上角的偏移量，或者完全偏移到其他三个角，没有空隙会让视觉感受上就不友好。这篇就是来看看在新的 CSS 特性中有什么好的解决方法。

常用到的半透明边框效果展示，需要用到 background-clip 来进行调整，代表意义也很明显，就是表面背景被切割的位置。