今天小编跟大家讲解下有关css实现二维码扫码框的示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css实现二维码扫码框的示例代码 的相关资料，希望小伙伴们看了有所帮助。
我们一般在打开相机的时候有个扫描框 然后静态二维码有时候为了聚焦和利于扫描也会加一个框框 下面介绍一下如何通过css 来实现一个框框
实现效果:
代码如下:
html:
<div class="img-box"> <img class="code" src="https://image-static.segmentfault.com/149/570/149570997-5b987cc928d69_articlex"></div>css:
.img-box { background: linear-gradient(#ae0000, #ae0000) left top, linear-gradient(#ae0000, #ae0000) left top, linear-gradient(#ae0000, #ae0000) right top, linear-gradient(#ae0000, #ae0000) right top, linear-gradient(#ae0000, #ae0000) right bottom, linear-gradient(#ae0000, #ae0000) right bottom, linear-gradient(#ae0000, #ae0000) left bottom, linear-gradient(#ae0000, #ae0000) left bottom; background-repeat: no-repeat; background-size: 2px 20px, 20px 2px; height: 116px; width: 116px;} .code { height: 110px; width: 110px; margin-top: 2px; margin-left:2px; border: 1px solid #ae0000;}以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
