CSS3 图片样式
学习如何使用 CSS 设置图片样式。
圆角图片
使用 border-radius 属性创建圆形图片：
实例
圆角图片:
<!DOCTYPE html><html><head><style>img {border-radius: 8px;}</style></head><body><h1>圆角图片</h1><p>请使用 border-radius 属性来创建圆角图片：</p><img src="/znadmin/md/1294/0.jpg" alt="terre" ></body></html>
实例
圆形图片：
<!DOCTYPE html><html><head><style>img {border-radius: 50%;}</style></head><body><h1>圆角图片</h1><p>请使用 border-radius 属性创建圆形的图片：</p><img src="/znadmin/md/1294/0.jpg" alt="terre" ></body></html>
缩略图图片
使用 border 属性创建缩略图。缩略图：
实例
<!DOCTYPE html><html><head><style>img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;width: 150px;}</style></head><body><h1>缩略图</h1><p>请使用 border 属性来创建缩略图：</p><img src="/znadmin/md/1294/0.jpg" alt="img_5terre" style="width:150px"></body></html>
作为链接的缩略图：
实例
<!DOCTYPE html><html><head><style>img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;width: 150px;}img:hover {box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);}</style></head><body><h1>作链接的缩略图</h1><p>请使用 border 属性创建缩略图。用锚包围图片以将其用作链接。</p><p>请把鼠标悬停在图片上，然后单击以查看效果。</p><a target="_blank" href="img_5terre.jpg"><img src="/znadmin/md/1294/0.jpg" alt="img_5terre" style="width:150px"></a></body></html>
响应式图片
响应式图片会自动调整以适合屏幕尺寸。
如果您希望根据需要缩小图片，但需要杜绝放大到大于原始尺寸，请添加如下代码：
<!DOCTYPE html><html><head><style>img {max-width: 100%;height: auto;}</style></head><body><h1>响应式图片</h1><p>自适应图片将自动调整以适合屏幕尺寸。</p><p>请调整浏览器窗口的大小以查看效果：</p><img src="/images/demo.png" alt="cankaoshouce" ></body></html>
居中图片
如需使图片居中，请将左右外边距设置为 auto 并将其设置为块元素：
<!DOCTYPE html><html><head><style>img {display: block;margin-left: auto;margin-right: auto;}</style></head><body><h1>居中图片</h1><p>如需对图片进行居中，请把左右外边距设置为 auto，并转为块元素。</p><img src="/znadmin/md/1294/0.jpg" alt="img_5terre" style="width:50%"></body></html>
宝丽来图片 / 卡片
意大利五渔村
挪威极光
实例
<!DOCTYPE html><html><head><style>body {margin:25px;}div.polaroid {width: 80%;background-color: white;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);margin-bottom: 25px;}div.container {text-align: center;padding: 10px 20px;}</style></head><body><h1>响应式宝丽来图片 / 卡片</h1><div class="polaroid"><img src="/znadmin/md/1294/0.jpg" alt="img_5terre" style="width:100%"><div class="container"><p>意大利五渔村</p></div></div><div class="polaroid"><img src="/znadmin/md/1294/3.jpg" alt="img_lights" style="width:100%"><div class="container"><p>挪威极光</p></div></div></body></html>
透明图片
opacity 属性的取值范围为 0.0 - 1.0。值越低，越透明：
opacity 0.2
opacity 0.5
opacity 1(default)
实例
<!DOCTYPE html><html><head><style>img {opacity: 0.5;}</style></head><body><h1>图片透明度</h1><p>opacity 属性规定元素的透明度。值越低，越透明：</p><p>50% 不透明度的图片：</p><img src="/znadmin/md/1294/4.jpg" alt="Forest"></body></html>
图片文本
如何在图片中定位文本：
左下
左上
右上
右下
居中
上述效果代码如下：
<!DOCTYPE html><html><head><style>.container {position: relative;}.topleft {position: absolute;top: 8px;left: 16px;font-size: 18px;}img {width: 100%;height: auto;opacity: 0.3;}</style></head><body><h2>图片文本</h2><p>在图片的四个角落和正中央添加文本</p><div class="container"><img src="/znadmin/md/1236/1.jpg" alt="Cinque Terre" style="width:100%;height:auto;opacity:0.3"><div style="position:absolute;bottom:8px;left:16px;font-size:18px">左下</div><div style="position:absolute;top:8px;left:16px;font-size:18px">左上</div><div style="position:absolute;top:8px;right:16px;font-size:18px">右上</div><div style="position:absolute;bottom:8px;right:16px;font-size:18px">右下</div><div style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:18px">居中</div></div></body></html>