CSS3制作圆角图片和椭圆形图片

制作圆角图片和椭圆形图片是CSS3中常用的技巧之一，下面是该技巧的完整攻略。

背景

在过去，要制作圆角图片和椭圆形图片需要依靠图形软件进行编辑处理，比较繁琐，而CSS3的出现大大简化了这个过程，只需要几行代码就可以实现。

制作圆角图片

要制作圆角图片，需要使用CSS3中的border-radius属性。该属性需要添加在需要圆角的元素的样式中。

示例1：实现图片四个角为圆角

HTML代码：

<div class="img-border">
  <img src="example.png" alt="example">
</div>

CSS代码：

.img-border {
  border-radius: 20px; /* 设置四个角的半径为20像素 */
  overflow: hidden; /* 隐藏超出圆角部分的图片 */
}

示例2：实现只针对部分角为圆角

HTML代码：

<div class="img-border">
  <img src="example.png" alt="example">
</div>

CSS代码：

.img-border {
  border-top-left-radius: 10px; /* 左上角的圆角半径为10像素 */
  border-bottom-right-radius: 50px; /* 右下角的圆角半径为50像素 */
  overflow: hidden; /* 隐藏超出圆角部分的图片 */
}

以上两个示例展示了如何使用border-radius属性制作圆角图片。其中，示例1是将四个角都设置为相同大小的圆角；示例2则展示了如何只针对矩形图片的部分角添加圆角。

制作椭圆形图片

要制作椭圆形图片，则需要使用border-radius属性的另一个特性——指定不同方向上的半径，从而实现椭圆形。

示例3：实现矩形图片为椭圆形

HTML代码：

<div class="img-border">
  <img src="example.png" alt="example">
</div>

CSS代码：

.img-border {
  border-radius: 50%/100%; /* 水平方向半径为50%，垂直方向半径为100% */
  overflow: hidden; /* 隐藏超出椭圆形部分的图片 */
}

示例4：实现只针对部分角为椭圆形

HTML代码：

<div class="img-border">
  <img src="example.png" alt="example">
</div>

CSS代码：

.img-border {
  border-top-left-radius: 50%/100px 100px; /* 设置左上角为椭圆形，水平半径为50%，垂直半径为100像素 */
  border-bottom-right-radius: 20px/100px 50px; /* 设置右下角为椭圆形，水平半径为20像素，垂直半径为50像素 */
  overflow: hidden; /* 隐藏超出椭圆形部分的图片 */
}

以上两个示例展示了如何使用border-radius属性的两个参数分别指定水平和垂直方向上的半径，从而制作椭圆形图片。其中，示例3是将矩形图片设置为最简单的椭圆形；示例4则展示了如何只针对矩形图片的部分角添加椭圆形。

综上所述，制作圆角图片和椭圆形图片是CSS3中比较常用的技巧，仅需要使用border-radius属性即可完成。