CSS HTML 图片样式

一、图片样式介绍

在网页设计中，图片是必不可少的元素。而为了让图片在网页中更好地融入整体设计，我们需要对其进行一些样式调整。这就是图片样式。

通过CSS样式的调整，我们能够对图片的大小、位置、边框、阴影、透明度、滤镜等进行定制，创造出各式各样的效果，使网页设计更加鲜活、生动。

二、图片大小调整

1、使用width和height属性来控制图片大小：

<img src="image.jpg" width="200" height="150">

2、使用CSS样式控制图片大小：

img {
  width: 50%;
  height: auto;
}

3、使用max-width和max-height属性避免图片变形：

img {
  max-width: 100%;
  max-height: 100%;
}

三、图片位置调整

1、使用margin属性调整图片位置：

img {
  margin: 10px;
}

2、使用float属性实现图片环绕文字效果：

img {
  float: left;
  margin: 0px 10px 10px 0px;
}

四、图片边框样式

1、使用border属性加粗边框：

img {
  border: 2px solid #000;
}

2、使用border-radius属性使图片圆角化：

img {
  border-radius: 50%;
}

五、图片阴影样式

1、使用box-shadow属性实现立体感效果：

img {
  box-shadow: 3px 3px 10px #888888;
}

2、使用text-shadow属性实现文字阴影效果：

h1 {
  text-shadow: 2px 2px 2px #888888;
}

六、图片透明度样式

使用opacity属性调整图片透明度：

img {
  opacity: 0.5;
}

七、图片滤镜样式

使用filter属性为图片添加滤镜效果（浏览器兼容性有限）：

img {
  filter: grayscale(100%);
}

总之，在网页设计中运用图片样式，能够让你的网页更加生动有趣！