css 图片一边有圆角

在网页设计中，圆角图片是非常常见的一种效果。利用CSS可以轻松地实现这种效果。本文将介绍如何在CSS中实现图片一边有圆角的效果。

    img {
        border-radius: 0px 10px 10px 0px;
    }

上面的代码中，我们利用border-radius属性为图片的右侧添加了10像素的圆角。该属性接受四个值，分别为左上角、右上角、右下角和左下角的半径大小。如果要为图片的左侧添加圆角，只需将上述代码中的值调换位置即可。

需要注意的是，该属性只适用于块级元素，因此需要将图片设置为块级元素才能实现效果。

    img {
        display: block;
    }

最终效果如下图所示：

需要注意的是，以上代码仅适用于单张图片。如果要为多张图片添加圆角效果，可以通过添加类或ID来实现。

    .rounded-img {
        border-radius: 0px 10px 10px 0px;
        display: block;
    }

以上代码中，我们为图片添加了一个类名。在HTML中，只需将该类名添加到对应的img标签上即可实现效果。

    <img src="image.jpg" class="rounded-img" />

综上，利用CSS实现图片一边有圆角的效果非常简单，只需添加一个border-radius属性即可。同时，需要注意图片的块级元素显示以及类名或ID的使用。