在CSS中裁剪带圆角边框的图像

Question

是否可以使用CSS裁剪图像，使其具有圆角边框？

原始图像

裁剪图像

我如何在CSS中执行此操作？

Answer 1

像这样：

<强> CSS：

img.foo {    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

<强> HTML：

<img class="foo" src="./foo.jpg" />

请参阅http://border-radius.com/了解发电机。

Answer 2

添加边框半径border-radius:4px;

Answer 3

css中的裁剪图像，将其用作“背景”。

HTML：

<div class="cropped-image"></div>

CSS：

.cropped-image {
   width: 100px; // crop by width
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   background: url("your image url") no-repeat center; // show image center
}

或使用clip - http://www.w3.org/wiki/CSS/Properties/clip

img{
   clip: rect(0px, 50px, 50px, 0px);
}

Answer 4

用于此

-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;

Answer 5

通过裁剪，如果你想让它像你的图像http://i.imgur.com/AJdVpn7.png那样，你可以用两种方式来做。

1. 通过CSS添加border-radius
2. 将图像裁剪为图像编辑软件中的边框圆度，并将其保存为gif或png以保证透明度。