我们一般在打开相机的时候有个扫描框，然后静态二维码有时候为了聚焦和利于扫描也会加一个框框，下面介绍一下如何通过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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。