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

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

分类：CSS_CSS3 答疑 - 常见问题 · 发布时间：2022-08-31 19:35 · 阅读：4027

这篇文章主要为大家分享了CSS3制作卡片式图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先看看效果图：

XML/HTML Code复制内容到剪贴板
  1. >  
  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-600" alt="Norway" style="width:100%">  
  22.   <div class="container">  
  23.     <p>The Troll's tongue in Hardanger, Norwayp>  
  24.   div>  
  25. div>  
  26. body>  
  27. html>  
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
标签：
CSS3 卡片式图片

相关文章

css3媒体查询中device-width和width的区别详解

这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

CSS3媒体查询实现不同宽度的下不同内容的展示功能

这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例，需要的朋友可以参考下

CSS3几种实现子容器水平垂直居中的方法

本文有几种方法可以实现容器与子容器水平垂直居中，主要包括Flexbox布局，position绝对定位+transform，表格布局，具有一定的参考价值，感兴趣的可以了解一下

css3实现文字首尾衔接跑马灯的示例代码

这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

CSS的浮动及清除浮动的5种方法介绍

这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
返回分类 返回首页