css怎样大边框里面再加个小边框

html-css015

css怎样大边框里面再加个小边框,第1张

使用outline+outline-offset实现多重边框

如果我们只需要绘制两层边框,使用outline也可以做到。outline是border外面的一层,和border原理一样。通过设定outline的样式可以为border外面再设定一层边框。但是需要注意的是,outline属性设定的边框不会随着内部元素边界样式的变化而变化。也就是说,如果元素边框带了圆角,那么outline绘制出的最外层边框仍然是矩形的。这是outline绘制边框的一个缺憾。

可以通过设置一下边框宽度来解决不能重合的问题。

像这样的带边框div的一定要计算很精准:

总宽度=div宽度+左边框宽度+右边框宽度(只要有边框的div都要计算边框的宽度)

上图中CSS并没有指定边框是多宽的,建议也指定定义好的宽度数值,再计算一下整体宽度是多少,这样应该就可以将边框重合了。

如果还不能重合,建议将完整代码截图发来。