最近在学习《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的属性，可能有兼容性问题，不过为我们提供了好的思路，也可以写回退方案。书里精彩的内容更多，大家也去看看吧！
网友评论