border beta

半透明边框

background-clip 初始值是"border-box"，意味着背景会被元素的 border box（边框的外沿框）裁切掉;值"padding-box"，浏览器会用内边距的外沿来把背景裁切掉。

多重边框

box-shadow方案

box-shadow 的好处在于它支持逗号分隔语法，我们可以创建任意数量的投影。 唯一需要注意的是，box-shadow 是层层叠加的，第一层投影位于最顶层，依次类推。因此，你需要按此规律调整扩张半径。比如说，在前面的代码中，我们想在外圈再加一道 5px 的外框，那就需要指定扩张半径的值为15px（10px+5px）。如果你愿意，甚至还可以在这些“边框”的底下再加一层常规的投影

outline 方案

在某些情况下，你可能只需要两层边框，那就可以先设置一层常规边框，再加上 outline（描边）属性来产生外层的边框。

这种方法的一大优点在于:

1. 产生虚线边框效果;
2. 你可以通过 outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值。

边框内圆角

除了直接使用两个元素也可以 只用一个元素：这个方法有点hack 的味道。 因为它依赖于描边不跟着圆角走的这个事实，但我们无法保证这种行为是永远不变的。 当前的规范在描边的绘制方面给了浏览器非常多的余地，但根据 CSS 工作组最近的讨论来看，未来规范将会明确地建议描边跟着圆角走。

background

连续的图像边框

background实现图像边框

border-image老式信封边框

老式信封边框

蚂蚁行军边框

条纹背景

CSS Stripes Generator (opens new window) 使用CSS 线性渐变 linear-gradient，background-size

灵活的同色系条纹

复杂的背景图案

Bennett Feely 的图案库 (opens new window)

网格

波点

棋盘

角向渐变conic-gradient