半透明边框&多重边框&背景定位

半透明边框

半透明颜色的实现已经屡见不鲜，以往在css2，大家需要准备一张单像素的半透明图片，但是边框呢？所幸css3的新特性可以帮助我们实现这一点

border:10px solid hsla(0,0%,100%,.5);

background:white;

其实背景颜色为白色还好，如果背景颜色是深色，你就会很恼火地看到背景色透过了边框的颜色。实际上我们的背景实现方式就是这样，背景色会延伸到边框所处区域下层。只需要给边框的border-style设为dashed(虚线)就可以看出来，所以透出来也见怪不怪了。

这时候，我们可以使用background-clip属性，将背景色裁切到所需的部分。

border:10px solid hsla(0,0%,100%,.5);

background:white;

background-clip:padding-box;/*代表外边框*/

样式对比，分别对应以上两段css

可以看到背景没有透过边框。

多重边框

关键词box-shadow属性

box-shadow可以轻松生成投影，但是它的第四个参数（扩张半径）可能很少有人用过，如果取正值，再加上两个为0的偏移量以及为0 的模糊值，得到的“投影”其实就类似于矩形（？）边框。

background:yellowgreen;

background-clip:padding-box;

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

得到的矩形（？）边框

而且，它支持逗号分隔语法，所以来第二个参数也是可以的。

background:yellowgreen;

background-clip:padding-box;

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

double边框

但是这里注意，实际deeppink的边框只有5px，这是因为第一个生成的"边框”总是最前，所以两个取差值就会显示出这样的效果，以此类推，如果再来一个参数，它会显示到第二个边框的后面，所以多重边框的像素值需要加上之前生成边框的像素值。

如果你只需要两层边框，outline属性则足够，而且它支持生成dashed，double等属性的边框。

背景定位

background:no-repeat right 20px bottom 10px;

直接对背景上的图片定位到背景元素的某个角落，中间参数可修改。若是要回退，请参考以下代码。

background:lightblue

            no-repeat bottom right ;