html中图片设置为圆角矩形

想要在网页中展示图片时，我们通常将图片设置为正方形或者矩形。但是有时候，我们需要将图片设置成圆角矩形，这种效果会使图片看起来更加美观。下面，我们来看一下如何在HTML中设置图片为圆角矩形。

<style>
    img {
        border-radius: 50%;
    }
</style>

在html中，我们可以通过CSS的border-radius属性来实现将图片设置为圆角矩形。其中，当我们将border-radius的值设置为50%时，图片将会变成一个圆形。

但是需要注意的是，这种设置方式只适用于正方形的图片。如果你想要将矩形的图片设置成圆角矩形，那么可以通过border-radius的两个值来分别设置横向和纵向的圆角半径。

<style>
    img {
        border-radius: 20px 40px 60px 80px;
    }
</style>

上面的代码中，通过设置border-radius的四个值，依次代表左上角、右上角、右下角、左下角的圆角半径大小。这样，我们就可以将矩形的图片设置为圆角矩形。

总之，在网页中设置图片为圆角矩形是一种简单而且实用的方法，能够使网页更具美观性。