你可能不知道的css_html/css_WEB-ITnose

最近在学习《css揭秘》这本书，作者是w3c工作组的特邀专家，设计css语言的委员之一。这本书实现了很多常见的、我们在写网页的时候不好实现的效果。阅读这本书，经常感叹“原来还可以这样”！让我们一起来学习一些效果吧！

书里提到编写可维护的css最大要素是尽量减少改动时要编辑的地方 比如一个按钮，我们可能写一堆font-size,line-height,padding的像素值，如果按钮需要放大，这些值都需要修改，如果用em做单位，可能改动的地方就小了

1.半透明边框 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的:border: 10px solid rgba(#255,#255,#255,.5);background: white; 但是我们会发现完全不透明！！ 我们可以使用css3的background-clip来实现我们想要的效果

 width: 50px; height: 50px; background-color: white; border: 10px dotted rgba(#255,#255,#255,.5); background-clip: padding-box;

我们把border设成dotted 可以看到这样的效果

半透明背景

background-clip是背景的范围，默认是border-box，我们把它设成padding-box，背景会沿着内边距被切掉。

2.多重边框

如果我们要给元素包多层边框，常常要加很多层标签，这样会污染我们的结构，我们可以思考其他的方案

• box-shadow方案

  background: yellowgreen;box-shadow: 0 0 0 10px #655,                    0 0 0 15px deeppink;

box-shadow方案

• outline方案大多数情况下，你可能只需要两层边框，outline可以使用虚线，outline-offset可以使用负值，实现缝边效果。

  background: yellowgreen;border: 10px solid #655;outline: 1px dashed #fff;outline-offset: -5px;

  outline方案

  不过，outline边框不一定会贴合 border-radius 属性产生的圆角，且只适用于双层边框的场景

  3.灵活的背景定位如果我们想让背景在容器的右下方，我们可能会用background-position:right bottom; 如果想让背景距离右下角宽高各20px呢？你知道怎么办吗？css3扩展了background-position属性，可以写background-position:right 20px bottom 20px;或者直接指定padding，然后background-origin: content-box;background-origin是css3新增的属性，默认是padding-box，指定了背景的位置。

  灵活的背景定位

  以上例子多是css3的属性，可能有兼容性问题，不过为我们提供了好的思路，也可以写回退方案。书里精彩的内容更多，大家也去看看吧！