CSS是網頁設計中的重要組成部分之一。在CSS中，引入矢量圖能夠為網頁添加一些美觀的效果。那么，如何在CSS中引入矢量圖呢？

我們可以使用CSS的background-image屬性，通過給元素設置背景圖來引入矢量圖。同時，我們也需要給元素設置width和height屬性來確定圖像的大小。下面是一個例子：

.icon {
width: 20px;
height: 20px;
background-image: url('icon.svg');
}

在上面的代碼中，我們為.icon元素設置了20像素的寬和高，同時設置了一個SVG格式的背景圖像。這個圖像可能是一個UI圖標、LOGO或者其他的矢量插圖。

與像素圖不同，矢量圖是基于數學公式的，因此它們不會失真或變模糊，即使我們將它們放大或縮小。這使得矢量圖比像素圖更加適合在不同大小的設備上使用，因為它們可以隨著屏幕大小的變化而自適應。

需要注意的是，當我們在使用矢量圖時，請保證瀏覽器支持SVG格式，因此需要檢查所使用的瀏覽器是否支持SVG，并提供其他格式的圖像來作為備選方案。

總之，在CSS中引入矢量圖是一個簡單而有效的方法，在網頁設計中為我們提供了更多的選擇。