知名移動支付寶、微信錢包等電子支付方式的流行，掃碼支付也成為了普及的支付方式之一。網上商家可以通過掃描用戶手機屏幕上的付款二維碼實現收款。

現在，我們可以用CSS輕松實現一個掃碼圖標。代碼如下：

.qrcode {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
text-align: center;
}
.qrcode:before {
content: "";
display: block;
position: absolute;
top: 20px;
left: 20px;
width: 60px;
height: 60px;
border: 3px solid #000;
border-radius: 5px;
background: #fff;
}
.qrcode:after {
content: "";
display: block;
position: absolute;
top: 22px;
left: 22px;
width: 56px;
height: 56px;
border: 1px dashed #000;
border-radius: 5px;
}
.qrcode span {
display: block;
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
text-align: center;
font-size: 12px;
}

我們使用偽元素:before和:after創建了二維碼的正方形和黑白漸變的圖案，并使用CSS屬性border-radius設置了圓角效果。然后在父元素.qrcode中插入一個文本元素，并使用絕對定位讓它放置在二維碼正下方。最后，在父元素.qrcode上設置了設置了寬和高和相對定位，讓整個圖標可以正常展示。

使用這個掃碼圖標，可以更好的向用戶展示付款二維碼的確認方式，同時也增加了網站的美觀度。