我们使用 border 属性来 创建缩略图 ，具体内容如下
XM L/HT ML Code 复制内容到剪贴板
<!DOCTY PE &nbs p; html > @H_ 126 _21@ < html > < head > < style > img { border: 1px solid # ddd; border-radius: 4px; padding: 5px; } </ style > </ head > < body > < h2 > 缩略图 </ h2 > < p > 我们使用 border 属性来创建缩略图。 </ p > < img src = "paris. jpg " alt = "Paris" width = "400" h ei ght = "300" > </ body > </ html >
缩略图如何作为连接？
XML/HTML Code 复制内容到剪贴板
<!DOCTYPE html > < html > < head > < style > a { dis play : inline-block; border: 1px solid #ddd; border-radius: 4px; padding: 5px; trans IT ion: 0.3s; } a:hover { box -s hadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } </ style > </ head > < body > < h2 > 缩略图作为连接 </ h2 > < p > 我们使用 border 属性来创建缩略图。在图片外层添加一个链接。 </ p > < p > 点击图片查看效果： </ p > < a t arg et = "_blank" hr ef = "paris.jpg" > < img src = "paris.jpg" alt = "Paris" width = "400" height = "300" > </ a > </ body > </ html >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 CSS3制作缩略图的详细过程 全部内容，希望文章能够帮你解决 CSS3制作缩略图的详细过程 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。