CSS的秘密——背景和边框（上）

有空的时候看到《CSS Secrets》这本书，觉得挺有意思的，决定按章节来将其内容整理出来，说不定以后就能用得上。
通过这本书才了解到dabblet。dabblet是一款简单的前端在线编辑器，实时查看效果非常方便。这里每个例子都可以在dabblet上在线查看效果，点击对应的小标题即可。
这篇文章整理《Backgrounds & Borders》这一章。W3C background新增属性介绍

1.1 半透明的边框

需求：在有背景图片的body上，制作一个白色底版，半透明边框的div。

body {
  background: url('http://csssecrets.io/images/stone-art.jpg');
}

div {
  /* HSLA颜色表示法：H色调（0/360表示红色，120表示绿色，240表示蓝色）;S饱和度（0%-100%）;L亮度（0%-100%）;透明度（0-1）*/
  border: 10px solid hsla(0,0%,100%,.5);
  background-color: white;
  /* 这句是关键，因为默认情况下，background会延伸至border的下方，如果border透明，就看不出效果。
  background-clip属性默认值为border-box，即background会延伸至border的下方，padding-box表示延伸至padding的边缘，content-box表示延伸至content的边缘。 */
  background-clip: padding-box;

  /* styling */
  max-width: 20em;
  padding: 2em;
  margin: 2em auto 0;
  /* 100%意思是默认继承body标签设置的字体大小;1.5表示行高 */
  font: 100%/1.5 sans-serif;
}

1.2 多层边界

为了达到多层边界的效果，可以通过以下两种方式解决：
（1）box-shadow
box-shadow平常用得较多，但第四个参数spread radius扩展阴影半径常常被忽略。它可以使边界扩展或缩小，是制作多层边界效果的关键。

div {
  width: 100px;
  height: 60px;
  margin: 25px;
  background: yellowgreen;
  /* 六个参数：X轴偏移量、Y轴偏移量、阴影模糊半径、阴影扩展半径、阴影颜色、投影方式(可选inset)*/
  box-shadow: 0 0 0 10px #655,
          0 0 0 15px deeppink,
          0 2px 5px 15px rgba(0,0,0,.6);
}

（2）outline
如果只需要两层边界，可以用outline实现。

div {
  width: 100px;
  height: 100px;
  margin: 25px;
  background: yellowgreen;
  border: 10px solid #655;
  outline: 15px solid deeppink;
}

用outline的好处，一是能够制作非实线边界，二是能够通过outline-offset属性控制其到元素边界的距离。
但是，当元素设置了border-radius圆角属性后，outline不会贴合圆角，这是一个bug，今后可能会被修复。

1.3 灵活的背景定位

在CSS2.1中，可以用background-position:bottom right;来将背景图片放置在右下角，但是没办法留出空隙，即设置图片到右下角的距离。
为了达到灵活的定位效果，可以通过以下三种方式解决：
（1）extended background-position
CSS3扩展了background-position，允许指定到任何一个角落的偏移量。

div {
  /* 在有些不支持extended background-position的浏览器中，定位在右下角的图片还是会出现在左上角，解决办法就是在background再设置一遍bottom right */
  background: url(http://csssecrets.io/images/code-pirate.svg)
              no-repeat bottom right #58a;
  background-position: right 30px bottom 10px;

  /* Styling */
  max-width: 10em;
  min-height: 5em;
  padding: 10px;
  color: white;
  font: 100%/1 sans-serif;
}

（2）background-origin
可以看出，如果用第一种方式，一旦需要修改偏移量，就需要修改三处地方。而用background-origin可以更方便，只需要修改padding一处即可。

div {
  background: url(http://csssecrets.io/images/code-pirate.svg)
              no-repeat bottom right #58a;
  /* background-origin默认值是padding-box*/
  background-origin: content-box;

  /* Styling */
  max-width: 10em;
  min-height: 5em;
  padding: 10px;
  color: white;
  font: 100%/1 sans-serif;
}

（3）calc()
calc()可以与background-position完美结合。

div {
  background: url(http://csssecrets.io/images/code-pirate.svg)
                no-repeat bottom right #58a;
  /* 距右边框20px，下边框10px。
  注意：减号两边要有空格，否则会有解析错误。根据向前兼容的规则，在未来，calc()内会允许使用关键字，关键字也可以包含连字符*/
  background-position: calc(100% - 20px) calc(100% - 10px);

  /* Styling */
  max-width: 10em;
  min-height: 5em;
  padding: 10px;
  color: white;
  font: 100%/1 sans-serif;
}

1.4 内圆角

有时候我们需要这样一种效果：一个容器，仅仅内角是圆的，外角还是方方正正的。我们可以用两个元素做出这样的效果。

<div class="something-meaningful"><div>
I have a nice subtle inner rounding,
don’t I look pretty?
</div></div>

.something-meaningful {
  background: #655;
  padding: .8em;
}
.something-meaningful > div {
  background: tan;
  border-radius: .8em;
  padding: 1em;
}

为了只用一个元素达到内圆角效果，可以通过以下方式解决：

div {
  /* 利用outline不会贴合圆角，而box-shadow会的特性，二者结合，达到内圆角效果。
  设置不同颜色时，容易发现outline在box-shadow的上层。
  另外，如果将box-shadow的宽度设置为outline的宽度，会引起某些浏览器的额外渲染，因此要设置得稍微小一点。
  根据勾股定理，若border-radius为r，则最小的box-shadow为根号2减1倍的r，为简化计算，可换为0.5r。
  */
  outline: .6em solid #655;
  box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */

  max-width: 10em;
  border-radius: .8em;
  padding: 1em;
  margin: 1em;
  background: tan;
  font: 100%/1.5 sans-serif;
}