多重边框

1、outline 方案

　　如需要两层边框，可以先设置一层常规边框，再加上outline（描边）属性来产生外层的边框。

1 .test {
2     background: yellowgreen;
3     border:10px solid #655;
4     outline: 5px solid deeppink;
5     
6 }

　　描边的另一个好处在于，可以通过outline-offset属性来控制它跟元素边缘之间的间距，这个属性可以接受负值。这对于某些效果来说非常重要。下例子中，实现了简单地缝边效果。

1 .test {
2     width: 300px;
3     height: 200px;
4     background: yellowgreen;
5     outline: 2px dashed deeppink;
6     outline-offset: -10px;
7 
8 }

如图所示：

posted @ 2017-02-13 15:13  未知小未来  阅读(142)  评论(0)  编辑  收藏  举报