img { /*设置照片宽度为100%*/ width: 100%; /*设置照片高度为自适应*/ height: auto; /*设置照片边框为1px实线黑色*/ border: 1px solid black; }
上面的代码设置了img标签的一些基本样式。通过width和height属性,使照片能够自适应浏览器窗口的大小。此外,border属性可以添加照片边框。
如果需要让照片居中显示,还可以使用以下代码:
img { /*设置照片为块级元素*/ display: block; /*设置照片外边距为auto*/ margin: auto; }
上面的代码将照片设置为块级元素,然后设置外边距为auto。这样就可以实现居中显示。
如果想让照片变圆,可以使用border-radius属性:
img { /*设置照片为圆形*/ border-radius: 50%; /*设置照片边框为none*/ border: none; }
上面的代码将照片的边框去掉,然后使用border-radius属性将照片变成圆形。
最后,如果想给照片添加阴影效果,可以使用box-shadow属性:
img { /*设置照片添加阴影效果*/ box-shadow: 5px 5px 5px #888888; }
上面的代码添加了5px的水平阴影、5px的垂直阴影和5px的模糊度,颜色为灰色。
综上所述,使用CSS可以对照片进行多种布局和美化,如设置宽高、居中、边框、圆角和阴影等。