[分享]CSS做图片裁剪不支持圆形

CSS可以对图片进行裁剪，实现各种不同的效果。但是它并不支持圆形的裁剪，这可能会给一些开发者带来一定的不便。/ 代码示例 / img { borderradius: 50; / 圆形裁剪不生效 / }...

CSS可以对图片进行裁剪，实现各种不同的效果。但是它并不支持圆形的裁剪，这可能会给一些开发者带来一定的不便。

/* 代码示例 */
img {
    border-radius: 50%; /* 圆形裁剪不生效 */
} 

使用border-radius属性来实现圆形裁剪是很常见的做法，但是其在img元素上并不生效。

不过，我们可以通过其他方式来实现图片的圆形裁剪。比如，可以使用SVG来绘制一个圆形，然后把图片作为其背景，从而实现圆形裁剪的效果。

/* 代码示例 */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url('图片路径');
    background-size: cover;
    background-position: center;
} 

以上代码中，我们创建了一个类名为circle的容器，通过设置其宽高和边框半径实现了圆形的形状。然后，我们设置其背景为我们要裁剪的图片，并通过background-size和background-position属性来调整图片的显示方式，从而达到了圆形裁剪的效果。

除了SVG，还有一些JS库可以实现圆形裁剪，比如Cropper.js、Jcrop等。这些库可以让我们更加方便地实现各种裁剪效果，不仅限于圆形。

总之，虽然CSS本身不支持圆形裁剪，但我们可以通过其他方式来实现这个需求。这不仅可以提高我们的开发效率，还能让我们更好地发挥CSS和JS的优势。