矢量圖是現在使用非常廣泛的一種圖像類型。相比于位圖，矢量圖可以隨意放大而不會失真，這點對于網頁設計來說尤為重要。在CSS中，我們可以利用一些技巧讓矢量圖可以任意大小的展示。

首先，我們需要的是一個矢量圖。可以使用Adobe Illustrator或者Sketch等矢量圖形軟件來制作一個SVG文件。SVG文件可以被識別為一個矢量圖形。下面是一個簡單的例子：

<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" />
</svg>

這段代碼會在一個100x100的區域內繪制一個80x80大小的矩形。當我們需要放大這個圖形時，只需要更改width和height屬性值即可。

在CSS中，我們可以使用background-image來引用SVG文件：

.icon {
width: 30px;
height: 30px;
background-image: url(icon.svg);
background-size: contain;
background-repeat: no-repeat;
}

這段代碼創建了一個30x30大小的元素，并將其中的背景圖片設置為icon.svg文件。在這個例子中，background-size屬性被設置為contain，它會自適應大小并確保整個SVG文件都能夠展示。

我們還可以用CSS屬性來操作SVG文件中的元素和屬性。例如，我們可以使用transform屬性來旋轉它：

.icon {
width: 30px;
height: 30px;
background-image: url(icon.svg);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(45deg);
}

這段代碼會將icon.svg文件中的元素旋轉45度。這樣，我們就可以隨意操作SVG文件中的元素，而不必擔心它們的放大縮小。