css怎么实现图片变成圆角矩形

在网页设计中，我们常常需要添加图片并使用 CSS（层叠样式表）来调整图片的样式。下面，我将展示如何将一张图片添加到网页中，并使用 CSS 的 `border-radius` 属性将其设置为圆角矩形。我还会简要介绍一下 CSS 的基本语法。

我们来创建一个简单的 HTML 页面。页面的头部定义了字符集为 UTF-8，以确保浏览器能够正确页面中的字符。

```html

```

接下来，我们在 `` 标签内添加一张图片。图片的 `src` 属性指定了图片的路径，`alt` 属性提供了图片无法显示时的替代文本。

```html

1.png" 示例图片">

```

然后，我们在 `` 标签内的 `

```

至此，我们已经完成了 HTML 和 CSS 的基本设置，可以在浏览器中打开这个 HTML 文件，查看效果。图片的四个角将呈现为圆角矩形。那么，关于 CSS 的基本语法，简单来说就是由上到下、由右到左地逐层叠加样式规则。每个规则都由选择器（如 `img`）和一对大括号内的属性和值组成。这些属性和值共同决定了网页元素的外观和行为。掌握 CSS 的基本语法，你就可以灵活地控制网页中的元素样式了。