重复的几何图案很好，但是会有一点无聊。在大自然中几乎没有像相同的瓷砖一样重复的事物。即使是重复的元素，也总是存在变化和随机性。例如一大片花丛，规则的排列足以让其很漂亮，但是足够的随机性也足够让其变得有趣。没有两朵花是一模一样的。这就是我们要让背景图案看上去尽可能自然的原因。
复制随机性可能是具有挑战性的，因为CSS不提供任何固有的随机性能力。让我们以条纹来举例。假设我们想要随机颜色（为简化难度，固定为四种颜色）和宽度的竖条纹背景图案，不能有肉眼可见的“空隙”。
background: linear-gradient(90deg,
#fb3 15%, #655 0, #655 40%,
#ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;
background: hsl(20, 40%, 90%);
background-image:linear-gradient(90deg, #fb3 10px, transparent 0),
linear-gradient(90deg, #ab4 20px, transparent 0),
linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;
background: hsl(20, 40%, 90%);
background-image:linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;有时候，我们想使用一张图像，不是作为背景，而是作为边框。将图片裁剪至边缘，用以装饰元素的边框，并且不管元素的尺寸多大，图片都能自适应地包裹元素的边缘。
用CSS实现连续图像边框的主要思路是再用一个纯白的背景覆盖用以做边框的图像，需要设置不同的background-clip，保证用以做边框的图像通过边框区域显示。最后一件事是，由于我们只能在最后一层有一个背景颜色，我们需要通过从白色到白色的CSS渐变来伪造白色。
（1）用现成的背景图像
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
padding: 1em;
border: 1em solid transparent;
background:linear-gradient(white, white) padding-box,
url(stone-art.jpg) border-box 0 / cover;（2）用SVG绘制的3×3九宫圆点背景图
border: 40px solid transparent;
border-image: 33.334% url('data:image/svg+xml,（3）葡萄酒主题的信封边框
当然，我们可以把同样的思想用在基于渐变的图案上。例如，葡萄酒主题的信封边框：
1）通过background
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;2）通过border-image
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,
red 0, red 1em,
transparent 0, transparent 2em,
#58a 0, #58a 3em,
transparent 0, transparent 4em);（4）前进的蚂蚁边界
这种技术的另一个有趣的应用是制作前进的蚂蚁边界。前进的蚂蚁边界是虚线边界，看起来像蚂蚁行军（如果你想象破折号是蚂蚁）。
为了实现前进的蚂蚁边界，我们将把条纹转换为黑白，将边框宽度减小到1px（才能将条纹变成虚线），并将背景尺寸更改为适当的尺寸。然后，background-position到100％使其滚动：
@keyframes ants { to { background-position: 100% } }
.marching-ants {
padding: 1em;
border: 1px solid transparent;
background:linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%
) 0 / .6em .6em;
animation: ants 12s linear infinite;
}（5）脚注
我们还可以用border-image制作脚注，只需要一个裁剪过的头部边框：
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,
currentColor 4em,
transparent 0);
padding-top: 1em;
