首页 > 开发 > CSS > 正文

css实现二维码扫码框的示例代码

2024-07-11 08:31:42
字体:
来源:转载
供稿:网友

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表