在網(wǎng)頁設(shè)計(jì)中，有時需要將圖片放置在一個圓形的框中，讓網(wǎng)頁看起來更加美觀。這時，可以使用CSS技術(shù)來實(shí)現(xiàn)。下面是一個簡單的例子：

<style>
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.circle img {
width: 100%;
height: auto;
display: block;
}
</style>
<div class="circle">
<img src="example.jpg" alt="example">
</div>

上面的代碼中，我們創(chuàng)建了一個圓形的容器，寬高都為200像素，邊框半徑為50%，也就是一個圓形。由于圖片有可能比容器大，我們需要將超出部分隱藏，所以將overflow屬性設(shè)置為hidden。接著，我們將圖片的寬度設(shè)置為100%，高度自適應(yīng)，這樣就可以讓圖片完全覆蓋整個圓形容器。注意，我們將圖片包裹在.circle類中，將其作為.circle的子元素來放置。

除了以上的方法，還有一些其他的實(shí)現(xiàn)方式，比較常用的是使用CSS3中的clip-path屬性來剪裁圖片。這種方法需要利用SVG或CSS3中的函數(shù)來定義剪裁區(qū)域，比較復(fù)雜，但效果非常不錯。下面是一個使用IE瀏覽器的代碼示例：

<style>
.circle {
width: 200px;
height: 200px;
background-image: url(example.jpg);
-webkit-clip-path: circle(50%);
clip-path: circle(50%);
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
</style>
<div class="circle"></div>

以上是CSS圖片在圓框內(nèi)的兩種實(shí)現(xiàn)方式，具體應(yīng)用要根據(jù)實(shí)際需求而定。