在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/.

好吧，我已经投了赞成票，但只要确保它是 `img.foo` 而不是 `img .foo` 你的选择器不正确，`img` 和 `.foo` 之间不应该有任何空格 (2认同)