XHTMT HTML5 CSS HTML DOM
jQuery JSON AJAX LESS HTML Bootstrap Foundation AngularJS Ember.js TypeScript AngularJS2 React jQuery UI jQuery EasyUI Node.js Highcharts Echarts Vue.js CoffeeScript Ext.js Meteor SASS Omi Markdown 前端开发规范 浏览器 webpack JavaScript CSS3
用户登录
用户注册

分享至

分享CSS3制作卡片式图片的方法

  • 作者: 浪哩戈浪
  • 来源: 51数据库
  • 2020-08-07
这篇文章主要为大家分享了CSS3制作卡片式图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先看看效果图：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body {margin:25px;}   
  6. div.polaroid {   
  7.   width: 40%;   
  8.   background-color: white;   
  9.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   
  10.   margin-bottom: 25px;   
  11. }   
  12. div.container {   
  13.   text-align: center;   
  14.   padding: 10px 20px;   
  15. }   
  16. </style>  
  17. </head>  
  18. <body>  
  19. <h2>响应式卡片</h2>  
  20. <div class="polaroid">  
  21.   <img src="rock600x400.jpg" alt="Norway" style="width:100%">  
  22.   <div class="container">  
  23.     <p>The Troll's tongue in Hardanger, Norway</p>  
  24.   </div>  
  25. </div>  
  26. </body>  
  27. </html>  
以上就是本文的全部内容，希望对大家的学习有所帮助，
推荐阅读
热点文章

Copyright 2018 51数据库(www.51sjk.com)

软件
前端设计
程序设计
Java相关