简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

Detailed process analysis of making thumbnails with CSS3

高洛峰
Release： 2017-03-07 15:20:33
Original
1638 people have browsed it

We use the border attribute to create thumbnails, the details are as follows

<!DOCTYPE html>
<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"    style="max-width:90%">
</body>
</html>
Copy after login

Detailed process analysis of making thumbnails with CSS3

How do thumbnails serve as connections? 

<!DOCTYPE html>
<html>
<head>
<style>
a {   
    display: inline-block;   
    border: 1px solid #ddd;   
    border-radius: 4px;   
    padding: 5px;   
    transition: 0.3s;   
}   
a:hover {   
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);   
}   
</style>
</head>
<body>
<h2>缩略图作为连接</h2>
<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
<p>点击图片查看效果：</p>
<a target="_blank" href="paris.jpg">
  <img src="paris.jpg" alt="Paris" width="400"    style="max-width:90%">
</a>
</body>
</html>
Copy after login

Detailed process analysis of making thumbnails with CSS3

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

For more detailed process analysis of CSS3 thumbnail creation and related articles, please pay attention to the PHP Chinese website!

Related labels：
css3 thumbnail
source：php.cn
Previous article：Share the detailed method of creating card-style images with CSS3 Next article：Introduction to the method of making rounded images and oval images with CSS3
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！