1. 设置图片大小(Width 和 Height):
img {
width: 100px;
height: auto; /* 保持宽高比例 */
}
2. 设置图片边框(Border):
img {
border: 2px solid #ccc;
}
3. 设置圆角图片(Border Radius):
img {
border-radius: 10px;
}
4. 图片居中显示(Margin):
img {
display: block;
margin: 0 auto;
}
5. 图片透明度(Opacity):
img {
opacity: 0.8;
}
6. 图片阴影(Box Shadow):
img {
box-shadow: 2px 2px 5px #888888;
}
7. 响应式图片(Responsive Images):
img {
max-width: 100%;
height: auto;
}
8. 背景图片(Background Image):
.element {
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
这只是一些基本的示例,你可以根据具体的设计和布局需求使用更多的CSS属性来处理图片。请记得进行兼容性测试,以确保你的样式在各种浏览器中正常显示。
转载请注明出处:http://www.zyzy.cn/article/detail/4069/CSS