《CSS 揭秘》- 背景与边框 - 第二章
css3图案库：
http://lea.verou.me/css3patterns/
http://bennettfeely.com/gradients
svg图案库： https://philiprogers.com/svgpatterns/
统计css代码文件体积：http://bytesizematters.com./
半透明边框
背景知识：RGBA/HSLA 颜色
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值
假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body
的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：
border: 10px solid hsla(0,0%,100%,.5);
background: white;
但这么写并没有效果,但我们的边框其实是存在的,默认情况下，背景会延伸到边框所在的区域下层。
解决办法：background-clip
这个属性的初始值是border-box ，意味着背景会被元素的 border box（边框的外沿框）裁切掉。
如果不希望背景侵入边框所在的范围，我们要做
的就是把它的值设为padding-box ，这样浏览器就会用内边距的外沿来把背景裁切掉。
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
image.png
多重边框
背景知识：
box-shadow 的基本用法
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
灵活的背景定位
- background-position 的扩展语法方案
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
- background-origin 方案
background-position 是以 padding box 为准
如果把它的值改成 content-box（参见下面的代码），我们在 background-position 属性中使用的边角关键字将会以内容区的边缘作为基准（也就是说，此时背景图片距离边角的偏移量就跟内边距保持一致了）
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;
- calc() 方案
把背景图片定位到距离底边 10px 且
距离右边 20px 的位置。如果我们仍然以左上角偏移的思路来考虑，其实
就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直
偏移量。谢天谢地，calc() 函数允许我们执行此类运算，它可以完美地在
background-position 属性中使用：
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
边框内圆角
box-shadow：<offset-x> <offset-y> <blur> <spread> <color> || <position>
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；被想象成从元素到阴影的距离；阴影颜色；阴影的位置（inset）；
image.png
条纹背景
https://jsfiddle.net/noyanse/epzv2doq/18/
因为渐变是一种由代码生成的图像,我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸
image.png
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要
小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。
这意味着，如果我们把第二个色标的位置值设置为 0，那它的位置就
总是会被浏览器调整为前一个色标的位置值
.stripe{
background: linear-gradient(#fb3 50%, #58a 0);//效果和之前一样
background-size: 100% 30px;
}
如果要创建超过两种颜色的条纹，也是很容易的。举例来说，下面的代
码可以生成三种颜色的水平条纹
垂直条纹
.vertical-stripe{
background: linear-gradient(to right, /* 或 90deg */
#fb3 50%, #58a 0);
background-size: 30px 100%;
}
斜条纹
.repeating-stripe{
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);
}
灵活的同色系条纹
.homochromy-stripe{
background: repeating-linear-gradient(30deg,
#79b, #79b 15px, #58a 0, #58a 30px);
}
这个有缺点，就是要改变颜色要改4处，还有更好的方法：把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹：
.homochromy-stripe-better{
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
}
复杂的背景图案
CSS 图案可以算是一个值得使用 CSS 预处理器（比如 Sass，http://sass-lang.com）来减少代码冗余的案例，因为最终图案越复杂，相应的代码就会变得越来越不DRY。
网格
background: white;
background-image: linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
质数是一些整数，除了 1 和自身之外，它们无法被其他任何数字整除。举例来说，最小的10 个质数分别是 2、3、5、7、11、13、17、19、23 和 29。另一方面，相对质数是一种数字之间的关系，而不是单个数字自身的属性。构成相对质数的这些数字没有公约数，但它们自己是可以有多个约数的（比如说，10 和 27 是相对质数，但它们都不是质数）。很显然，一个质数跟其他所有数字都可以构成相对质数。
这个技巧被 Alex Walker 定名为“蝉原则”，他最先提出了通过质数来
增加随机真实性的想法。请注意这个方法不仅适用于背景，还可以用于其他
涉及有规律重复的情况。
- 在照片图库中，为每幅图片应用细微的伪随机旋转效果时，可以使
用多个 :nth-child(a) 选择符，且让 a 是质数。 - 如果要生成一个动画，而且想让它看起来不是按照明显的规律在
循环时，我们可以应用多个时长为质数的动画。（可以在 play.
csssecrets.io/cicanimation 看到一个示例。）
