7

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

原始图像

在此处输入图像描述

裁剪图像

在此处输入图像描述

我如何在 CSS 中做到这一点？

4

6 回答 6

12

边界半径简介：

CSS 中的圆角边框是通过一个名为的属性实现的border-radius，您可以将其想象为一个实际的圆或每个角的四分之一圆，每个角都有一定的半径，并裁剪所选元素的锐边以匹配四分之一圆曲线。当您将它与像素值或固定值一起使用时，如果与%诸如border-radius: 50%;它完全不同的故事的值一起使用，就会发生这种情况。

这是了解有关border-radius W3schools 或Mozilla的更多信息的好资源

解决方案：

您想要实现的事情可以这样完成：

CSS：

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

HTML：

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

有关生成器，请参见border-radius.com。

于 2013-08-27T12:41:12.927 回答
2

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

于 2013-08-27T12:39:45.220 回答
1

在 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);
}
于 2013-08-27T12:45:58.990 回答
0

习惯了这个

-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
于 2013-08-27T12:40:39.343 回答
0

通过裁剪，如果您想让它像您拥有的图像一样，例如http://i.imgur.com/AJdVpn7.png，您可以通过两种方式实现。

  1. 通过 CSS 添加边框半径
  2. 在图像编辑软件中将该图像裁剪为边界圆度，并将其保存为 gif 或 png 以提高透明度。
于 2013-08-27T12:41:32.063 回答
0 

<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a">
<style>
img{
    width: 20%;
    border-radius: 50px;
}
</style>

您可以使用width来指定图像的宽度；并且，border-radius用于指定图像的边框半径（角半径）...

于 2021-08-13T06:31:04.427 回答