《css揭秘》- 47个不可不知的 css 技巧(上篇0-19)（一）

前言

《css 揭秘》这本书以案例的形式，介绍了 47 个网页设计经典难题的解决方案，我在学习之余将其一一记录下来，方便回顾，本文介绍前 19个案例效果及代码。

在线预览 play.csssecrets.io

1-半透明边框

介绍：当你用 rgba() 或者 hsla() ，写了一个半透明的颜色，给到容器边框时候，你会发现，没有半透明效果，这是因为默认情况下，背景色会填充到边框区域，导致边框的半透明效果失效，当把 border 样式设置为 dashed 时候，你会很直观的发现这一点。

解决方案

使用 background-clip 属性调整上面的默认效果，这个属性的默认值为 border-box，此时背景会被元素的 border 给遮盖，它还可以配置 padding-box || content-box,  此时浏览器将以内边距或内容区外沿来渲染。 修改后，border 的半透明效果就生效了。

拓展

background-clip 还有个 text 属性，很有意思，当设置为text 后，背景会被裁剪成文字的前景色。

2-多重边框

介绍：使用 border 来生成单一的边框很容易，但是若想生成多重边框就做不到了，通常需要使用各种 hack 例如使用多个元素来模拟实现。

box-shadow 方案

一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就是一条实线；再结合 box-shadow  的逗号分隔语法，来创建任意数量的投影。

注意：

1. 投影行为跟边框不完全一致
2. 生成的边框默认出现在元素外圈，可以加上 inset 关键字来使投影绘制在元素的内圈，注意预留足够的内边距来腾出足够的间隙
3. 
   

outline 方案

如果只需要两层边框，可以在常规边框的基础上，增加 outline(描边) 属性来产生外层的边框，特点是比较灵活。

总结: 这两种方案都可以实现多重边框的效果，但是outline 只适用于双层边框的场景，如果需要更多层边框，可以用 box-shadow 来实现，另外这两种方案都有一个潜在的缺陷，采用时一定要在不同的浏览器中测试好最终效果。

3-灵活的背景定位

介绍：想要的效果：使背景图片针对某个角进行准确的偏移定位？

background-position 方案

background-origin 方案

这种方案的优点是，当内边距改变时，其会自动进行位置偏移更新，不用重新声明新的偏移量。

calc() 方案

calc() 也可以结合 background-position 进行准确的计算偏移量，达到同样的效果。注意 calc() 函数内部的 - 和 + 运算符两侧需要各加一个空白符，否则会解析错误。

background-position: calc(100% - 20px) calc(100% - 10px);

4-边框内圆角

介绍：想要的效果如下，只显示内部圆角，外部仍然为矩角

双元素叠加方案

使用双 div 元素叠加来实现

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  margin: 100px auto;
  width: 400px;
  height: 200px;
  background: #655;
  padding: 0.8em;
}
.child {
  height: 170px;
  background: tan;
  padding: 1em;
  border-radius: 0.8em;
}

单元素方案

这种方案在书中提到是个 hack, 果然我写这篇文章的时候，验证了谷歌浏览器中 outline 的样式会跟着border-radius 走，所以这个方案基本已经失效了。

div {
    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;
}

5-条纹背景

介绍: 传统方案都是用 svg 或者图片来解决，这里直接使用 css 来创建条纹图案

// 水平条纹效果
background: linear-gradient(#fb3 50%, #58a 50%); 
background-size: 100% 30px;
// 垂直条纹效果
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;
// 斜向条纹
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;
// 同色系条纹
background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);
background: #58a;
// 同色系条纹 重构
background: repeating-linear-gradient(
  30deg, 
  hsla(0, 0%, 100%, .1),
  hsla(0, 0%, 100%, .1) 15px,
  transparent 0,
  transparent 30px);
background: #58a;