css揭秘--（1）边框样式（半透明边框、多重边框）

1.半透明边框

2.多重边框

方法一：

知识点： box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow:水平阴影位置；
• v-shadow:垂直阴影的位置；
• blur :模糊距离；
• spread:阴影尺寸；
• inset:内部阴影或外部阴影；

值得注意的是，通过调整阴影尺寸正值或负值，让投影面积加大或减少，加上两个为0的偏移量和为0的模糊值，得到的投影像实线边框·，唯一需要注意的是，第一层投影位于最顶层，以此类推，阴影尺寸需逐步增大，但是boxshadow创建的边框不接受鼠标事件。比如hover，click.如果需要鼠标事件，需要改成内阴影。

方法二： 注意：通过outline-offset属性控制outline与border之间的间距。