css魔法系列(2)

原创 雨花茶 随笔 css 257阅读 2017-05-18 13:49:25 举报

多重边框
设置边框我们首先会想到border,但是现在老板让你做2个边框你怎麽办?你会说我在写一个border呗,但是border并不允许多写,第2个border回覆盖掉前面一个。那怎莫办。
介绍2种解决方案:
1.box-shadow方案
也行你会问box-shadow不是阴影吗,怎么能用来生成边框,往下看。
box-shadow: 0 0 0 10px #655;前面3个参数设置为0;这样就生成了一个边框了。2个边框我们就在写一个就好了。是不是很灵活。需要多少写多少。
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
但是我们要注意一个box-shadow是层层叠加的。每个阴影都是从border开始的。我们要计算好他的扩张半径(第4个参数)。
这种边框实现的优点是不会影响我们建好的盒模型。
2.out-line方案
我们可以设置一下边框线的样式比如dashed(虚线)
具体代码:

html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复