實現卡片效果【DIV+CSS3】

本文轉載自查看原文 2017-05-16 18:00 14951 DIV+CSS/ 卡片效果/ CSS3

一、文字卡片效果

 1 <html>
 2 <head>
 3 meta<charset="utf-8">
 4 <title>文字卡片效果</title>
 5 <style>
 6 div.card {
 7 width: 250px;
 8 box-shadow: 04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19);
 9 text-align: center;
10 }
11 div.header {
12 background-color: #4CAF50;
13 color: white;
14 padding: 10px;
15 font-size: 40px;
16 }
17 div.container {
18 padding: 10px;
19 }
20 </style>
21 </head>
22 <body>
23 <h2>卡片</h2>
24 <p>box-shadow 屬性用來可以創建紙質樣式卡片:</p>
25 <divclass="card">
26 <divclass="header">
27 <h1>1</h1>
28 </div>
29 <divclass="container">
30 <p>January 1, 2016</p>
31 </div>
32 </div>
33 </body>
34 </html>

效果如下：

二、圖片卡片效果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>圖片卡片效果</title>
 6         <style>
 7             div.imgcard{
 8                 width: 250px;
 9                 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
10                 text-align: center;
11             }
12             
13             div.container{
14                 padding: 10px;
15             }
16         </style>
17     </head>
18     <body>
19         <div class="imgcard">
20             <img src="background.png" style="width:100%"/>
21             <div class="container">
22                 <p>歡迎來到W星系</p>
23             </div>
24         </div>
25     </body>
26 </html>

效果如下：

特別說明：本系列持續連載，不定期分享更新，參考自菜鳥教程（一個神奇的網站）！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 一個純CSS實現的卡片翻轉效果 div+css3繪制基本圖形 CSS實現卡片切換效果 DIV實現CSS 的placeholder效果 css3卡片陰影效果 DIV+CSS實現FRAMESET效果 css 背景弧度效果--卡片樣式卡片翻轉效果（css3+angularjs） div內發光效果 CSS swiper 5張卡片輪播圖實現效果