img{ width: 100%; max-width: 600px; display: block; margin: 0 auto; border: 1px solid #ccc; box-sizing: border-box; }
在这个CSS样式中,大家可以看到设置了以下几个属性:
width: 100%;
:图片宽度为父级元素的100%。max-width: 600px;
:最大宽度为600px,当父级元素宽度大于600px时,图片宽度为600px。display: block;
:将图片转换为块级元素,可以让图片独占一行。margin: 0 auto;
:设置图片居中对齐。border: 1px solid #ccc;
:设置图片边框为1px实线,颜色为#ccc。box-sizing: border-box;
:设置盒模型为边框盒模型,使得设置边框时不会导致盒子变大。
通过这个CSS样式,大家可以轻松地为网页中的图片添加各种效果,让网页展现更高质量的图片及更好的视觉效果。