css中怎样增加图片样式

CSS中怎样增加图片样式
当我们在网页中加入图片时，我们可以使用CSS来改变它们的样式，使得页面更加精美。以下是一些常见的CSS图片样式技巧。
1. 缩放和大小
可以使用CSS的width和height属性改变图片的尺寸。例如，将图片缩小50%：
pre {
background-color: #f5f5f5;
padding: 10px;
}
p {
font-size: 18px;
font-weight: bold;
color: #333;
}
img {
width: 50%;
height: auto;
}
2. 圆角
可以使用CSS的border-radius属性将图片变为圆角。例如，将图片的四个角变为50像素的圆角：
pre {
background-color: #f5f5f5;
padding: 10px;
}
p {
font-size: 18px;
font-weight: bold;
color: #333;
}
img {
border-radius: 50px;
}
3. 阴影
可以使用CSS的box-shadow属性为图片添加阴影。例如，添加一个5像素的黑色阴影：
pre {
background-color: #f5f5f5;
padding: 10px;
}
p {
font-size: 18px;
font-weight: bold;
color: #333;
}
img {
box-shadow: 5px 5px 5px #333;
}
4. 边框
可以使用CSS的border属性为图片添加边框。例如，添加一个2像素的红色边框：
pre {
background-color: #f5f5f5;
padding: 10px;
}
p {
font-size: 18px;
font-weight: bold;
color: #333;
}
img {
border: 2px solid red;
}
5. 滤镜
可以使用CSS的filter属性为图片添加滤镜效果，例如变灰、反转颜色等。例如，将图片变成灰色：
pre {
background-color: #f5f5f5;
padding: 10px;
}
p {
font-size: 18px;
font-weight: bold;
color: #333;
}
img {
filter: grayscale(100%);
}
总结
以上是一些常见的CSS图片样式技巧，可以让我们更加灵活地处理图片的样式，为页面增加更多的美感。当然，这些技巧也只是冰山一角，在实际应用中还有很多其他精彩的样式可以使用。