近年來，隨著移動支付的發展，二維碼成為了我們生活中不可缺少的一部分。而在網頁設計中，二維碼的應用也越來越廣泛。本文將介紹如何使用CSS創建二維碼樣式，以增強網頁設計的美觀度。

/* 創建二維碼容器 */ 
.qr-code {
width: 200px;
height: 200px;
margin: 0 auto;
background: #fff;
border: 1px solid #000;
}
/* 定義二維碼樣式 */ 
.qr-code::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background: #000;
border-radius: 50%;
}
/* 將二維碼嵌入到容器中 */ 
.qr-code::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
background: url("your-qrcode-image.jpg");
background-size: cover;
border-radius: 50%;
}

上述代碼中，首先創建了一個名為 "qr-code" 的容器，寬高為200px，邊框為1px的實線黑色。接著使用 ::before 偽元素定制二維碼的樣式，創建一個黑色圓形，并將其嵌入到容器中間部分。最后使用 ::after 偽元素嵌入真正的二維碼圖片。為避免變形，將背景圖片的大小設置為 cover，使之撐滿整個圓形區域。

在應用本文介紹的二維碼樣式時，需要注意大小的適配。應根據實際需求選擇合適的二維碼容器大小，以及嵌入的二維碼圖片大小。此外，也可以通過border、background、box-shadow等屬性，進一步定制化樣式，使之更加個性化。