我們一般在打開相機的時候有個掃描框，然后靜態二維碼有時候為了聚焦和利于掃描也會加一個框框，下面介紹一下如何通過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;} |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
