CSS是一種用于網(wǎng)頁樣式設計的語言，它可以通過各種屬性和值來設置網(wǎng)頁元素的外觀及其布局。其中一個常見的應用場景就是在圖片外加矩形框。下面我們來介紹一下如何使用CSS來實現(xiàn)這個效果。

首先，我們需要使用HTML代碼將圖片放置在頁面中。比如：

<div class="image-box">
<img src="image.jpg" alt="圖片">
</div>

這里我們給圖片放在了一個div容器中，并為這個容器添加了一個class屬性，方便我們在CSS中進行樣式設置。接下來，我們就可以在CSS中設置這個容器的樣式了。

.image-box {
border: 2px solid #000;
padding: 10px;
}

這里我們使用了兩個CSS屬性，分別是border和padding。其中，border用于設置容器的邊框樣式，包括線條粗細、顏色和樣式，這里我們將其設置為2像素寬，黑色實線。padding用于設置容器內部與邊框的距離，這樣我們就可以在容器內部留出一些空白區(qū)域，用于放置圖片。

最后，我們可以針對圖片進行一些樣式設置，使其更好地展示在容器中。比如：

.image-box img {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}

這里我們使用了四個CSS屬性：max-width、height、display和margin。其中，max-width用于設置圖片的最大寬度為100%，保證圖片不會超出容器的范圍；height用于自動調整圖片的高度，保持比例；display用于將圖片轉換為塊級元素，使其可以居中顯示；margin用于將圖片水平居中，確保其在容器中間。

這樣一來，我們就能夠在網(wǎng)頁中實現(xiàn)一個帶有邊框的圖片了。通過設置CSS樣式，我們可以自由控制容器的邊框和內部空白區(qū)域，同時對圖片進行適當?shù)臉邮秸{整，從而達到更好的展示效果。