为何存在缝隙？
当非整数缩放或非整数倍缩放时，即使是普通的嵌套 div 元素，在内部 div 和外部 div 的边框紧贴情况下，也会出现这种缝隙。
处理缝隙的解决方法
避免此类布局：例如，不要在内部元素上添加背景色，直接在有边框的元素上添加背景色。或者在有边框的元素外面套一个 div 进行溢出隐藏，避免直接在有边框的元素上进行溢出隐藏。
消除缝隙的其他方法
将 border 添加到伪元素：
目标元素 {position: relative;padding: 1px 3px 1px 1px;}目标元素::伪元素 {content: "";position: absolute;left: 0;top: 0;right: 0;bottom: 0;border: 1px solid #dea44d;border-radius: 9em;pointer-events: none;}
使用轮廓：
目标元素 {margin: 1px;outline: 1px solid #dea44d;}
或
目标元素 {padding: 1px 3px 1px 1px;outline: 1px solid #dea44d;outline-offset: -1px;}
使用阴影：
目标元素 {margin: 1px;box-shadow: 0 0 0 1px #dea44d;}
或
目标元素 {padding: 1px 3px 1px 1px;box-shadow: 0 0 0 1px #DEA44D inset;}
建议将圆角稍大一些，因为这样可以更好地隐藏缝隙。
以上就是嵌套边框元素为何会出现缝隙，以及如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630562.html
微信扫一扫 
支付宝扫一扫 
