简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

CSS3製作縮圖的詳細流程分析

高洛峰
發布： 2017-03-07 15:20:33
原創
1639 人瀏覽過

我們使用 border 屬性來建立縮圖，具體內容如下

<!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>
登入後複製

CSS3製作縮圖的詳細流程分析

縮圖如何作為連線？ 

<!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>
登入後複製

CSS3製作縮圖的詳細流程分析

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

更多CSS3製作縮圖的詳細流程分析相關文章請關注PHP中文網！

相關標籤：
css3 縮圖
來源：php.cn
上一篇：分享CSS3製作卡片式圖片的詳細方法 下一篇：CSS3製作圓角圖片和橢圓形圖片的方法介紹
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！