css（层叠样式表）是一种样式表语言，它用于描述网页的外观和格式。css可以通过样式表为网页中的元素设置各种样式，其中包括图像。在这篇文章中，我们将学习如何使用css来设置图片样式。
一、添加图片
在学习如何设置图片样式之前，首先需要了解如何在网页中添加图片。向网页添加图像的最简单方法是使用HTML的img标签。使用img标签，可以指定图像的URL（Web地址）：
<img src="https://example.com/image.jpg">
其中，“src”（源）属性指定图像的URL。可以使用相对或绝对URL。如果图片是在同一目录下，则可以使用相对URL：
立即学习“前端免费学习笔记（深入）”；
<img src="image.jpg">
这将指定名为“image.jpg”的图像文件位于同一目录中。如果图像文件在不同的目录中，则可以使用相对路径，如下所示：
<img src="../images/image.jpg">
在此示例中，“..”表示返回上一级目录，然后再前往“images”目录，并查找名为“image.jpg”的文件。
二、设置图片大小
设置图像大小是CSS中最常用的样式之一。可以使用“width”（宽度）和“height”（高度）属性来指定图像的大小。这些属性接受像素（px）、百分比和其他长度单位作为值。
例如，为了将图片大小设置为200像素宽度和100像素高度，可以使用以下CSS：
img {
width: 200px;
height: 100px;
}
也可以将宽度或高度属性设置为百分比。例如，如果要将图像大小设置为其包含元素的50％，可以使用以下CSS：
img {
width: 50%;
height: 50%;
}
可以通过使用单一的“width”属性来设置图像的宽度，并自动计算高度来保持宽高比。例如，以下CSS将图像的宽度设置为300像素：
img {
width: 300px;
}
三、对齐和浮动
还可以使用CSS设置图像的位置和对齐方式。可以使用“margin”（外边距）和“padding”（内边距）属性来控制图像周围的空白。
例如，以下CSS将图像左对齐，并在图像左侧和上方添加10像素的外边距：
img {
display: block;
float: left;
margin: 10px 0 0 10px;
}
在此示例中，“display”属性将图像设置为块级元素，以使其在其他内容下方显示。 “float”属性与“left”值将图像向左浮动。最后，“margin”属性的值按顺序为上、右、下和左，则指定了10像素的上外边距和左外边距。
还可以使用“text-align”属性将图像对齐。例如，以下CSS将图像居中对齐：
img {
display: block;
margin: 0 auto;
text-align: center;
}
在此示例中，“margin”属性的值为“0 auto”，表示将图像水平居中。最后，“text-align”属性设置为“center”将图像垂直居中。
四、圆角和边框
另一种常见的图像样式是圆角和边框。可以使用“border-radius”（圆角半径）属性设置边框的边角半径。例如，以下CSS将图像设置为拥有50像素的圆角边框：
img {
border-radius: 50px;
}
还可以使用“border”属性设置图像边框的宽度、样式和颜色。例如，以下CSS将图像设置为3像素宽，黑色边框：
img {
border: 3px solid black;
}
可以使用“border-top”、“border-right”、“border-bottom”和“border-left”属性分别设置不同的边框。
小结
使用CSS，可以轻松地设置网页中的图像样式。可以设置图像大小、位置、对齐方式、圆角和边框。这些样式可以通过CSS规则选择器应用到一个或多个特定类型的图像元素。
