CSS二維碼四角的邊框

/*設置二維碼外邊框*/
#qr-code{
margin: 20px;
border: 2px solid #ccc;
padding: 10px;
}
/*設置四角邊框*/
#qr-code:before,
#qr-code:after{
content:"";
display:block;
position:absolute;
border:2px solid #000;
}
#qr-code:before{
top:-2px;
left:-2px;
border-top:none;
border-left:none;
width:20px;
height:20px;
}
#qr-code:after{
bottom:-2px;
right:-2px;
border-right:none;
border-bottom:none;
width:20px;
height:20px;
}

這段代碼使用了:before和:after偽元素來實現二維碼的四個角的邊框效果。:before偽元素用于實現左上角和右下角的邊框，而:after偽元素用于實現右上角和左下角的邊框。

其中，content屬性設置為空，使得二維碼外沒有文字或者圖像；display屬性設置為塊級元素，使得偽元素可以設置大小和位置；position屬性設置為絕對定位，使得偽元素可以獨立于二維碼的位置進行定位。

使用border屬性來實現邊框的線條樣式，使用width和height屬性來設置偽元素的大小，使用top、right、bottom和left屬性來設置偽元素的位置，從而實現四角邊框的效果。

代碼中還設置了二維碼的外邊框，使用border屬性設置黑色邊框，同時設置margin和padding屬性來調整邊框和內部內容的間距。

這段代碼可以通過調整偽元素的位置和大小以及邊框屬性來實現不同風格的四角邊框效果。