当前位置：主页 > 查看内容

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

发布时间：2021-07-12 00:00| 有 位朋友查看

简介：我们一般在打开相机的时候有个扫描框，然后静态二维码有时候为了聚焦和利于扫描也会加一个框框，下面介绍一下如何通过css 来实现一个框框 实现效果: 代码如下: html: div class=img-box img class=code src=https://image-static.segmentfault.com/149/570/1……

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

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


原文链接：https://m.jb51.net/css/636411.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：纯css实现立体摆放图片效果的实例代码 下一篇：CSS绘制三角形的实现代码(border法)

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐