CSS 實現圖片圓角

一、使用 border-radius 屬性實現圖片圓角

使用 CSS 的 border-radius 屬性可以實現圖片圓角。通過設置該屬性的值即可控制圖片的圓角度數。

<img src="your-image-url" alt="your-image-description" style="border-radius: 50%;">

上述代碼片段會將圖片設置為圓形，其 border-radius 屬性的值為 50%。

二、使用 clip-path 屬性實現圖片圓角

除了使用 border-radius 屬性，還可以使用 clip-path 屬性實現圖片圓角。該屬性接受的值是一個路徑，在路徑的區域內呈現圖片。

<img src="your-image-url" alt="your-image-description" style="clip-path: circle(50%);">

上述代碼片段會將圖片設置為圓形，其 clip-path 屬性的值為 circle(50%)。

三、使用 mask-image 屬性實現圖片圓角

css mask-image 屬性也可以實現圖片圓角效果。mask-image 屬性可以將所選元素填充為半透明的蒙板，其最終效果與 clip-path 類似。

<img src="your-image-url" alt="your-image-description" style="mask-image: url(your-mask-image-url); mask-size: cover;">

上述代碼片段會為圖片添加遮罩，遮罩圖片為 your-mask-image-url，同時使用 mask-size 屬性設置遮罩圖片的大小覆蓋整個元素。遮罩圖片的形狀會影響到元素的形狀。

四、使用 SVG 實現圖片圓角

SVG 可以創建矢量圖形，因此也可以用於實現圖片圓角，具體步驟如下：

1. 使用 SVG 的 <clipPath> 元素創建路徑
2. 使用 SVG 的 <image> 元素引用所需圖片
3. 將 <image> 元素的 clip-path 屬性設置為剛才創建的路徑的 id 即可

<svg width="0" height="0" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip">
    <circle cx="100" cy="100" r="100" />
  </clipPath>
</svg>

<img src="your-image-url" alt="your-image-description" style="clip-path: url(#myClip);">

上述代碼片段將創建一個圓形路徑，然後將該路徑應用於圖片。

五、使用 canvas 實現圖片圓角

在 canvas 中，可以使用 globalCompositeOperation 屬性將兩個圖像合併，從而實現圓角效果。具體步驟如下：

1. 在 canvas 上繪製一個圓形路徑
2. 將圖片繪製到圓形路徑上
3. 設置 globalCompositeOperation 屬性為 source-in

<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function() {
    // 繪製圓形路徑
    ctx.beginPath();
    ctx.arc(100, 100, 100, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();

    // 繪製圖片
    ctx.drawImage(img, 0, 0, 200, 200);

    // 設置屬性，合併圖像並顯示
    ctx.globalCompositeOperation = "source-in";
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 200, 200);
  }
  img.src = "your-image-url";
</script>

上述代碼片段將創建一個 canvas 元素，然後使用 getContext(“2d”) 獲取 2D 渲染上下文。在圖片加載完成後，繪製圓形路徑，將圖片繪製到 canvas 上，然後將 globalCompositeOperation 屬性設置為 source-in，最後填充白色矩形，合併圖像並在 canvas 上顯示。