文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

首頁 > web前端 > css教學 > 主體

分享CSS3製作卡片式圖片的詳細方法

高洛峰

發布： 2017-03-07 15:18:20

原創

2097 人瀏覽過

先看看效果圖：

分享CSS3製作卡片式圖片的詳細方法

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}   
p.polaroid {   
  width: 40%;   
  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;   
}   
p.container {   
  text-align: center;   
  padding: 10px 20px;   
}   
</style>
</head>
<body>
<h2>响应式卡片</h2>
<p class="polaroid">
  <img src="rock600x400.jpg" alt="Norway"   style="max-width:90%">
  <p class="container">
    <p>The Troll&#39;s tongue in Hardanger, Norway</p>
  </p>
</p>
</body>
</html>

登入後複製

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

更多分享CSS3製作卡片式圖片的詳細方法相關文章請關注PHP中文網！

相關標籤：

CSS3 卡片式图片

來源：php.cn

上一篇：詳細介紹CSS之margin知識點下一篇：CSS3製作縮圖的詳細流程分析

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章