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

Sid*_*tik 6 css image css3

是否可以使用CSS裁剪图像,使其具有圆形边框?

原始图像

在此输入图像描述

裁剪图像

在此输入图像描述

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

Jor*_*ren 10

像这样:

CSS:

img.foo {    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<img class="foo" src="./foo.jpg" />
Run Code Online (Sandbox Code Playgroud)

有关生成器,请访问http://border-radius.com/.

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