Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > body text

Share the detailed method of creating card-style images with CSS3

高洛峰
Release： 2017-03-07 15:18:20
Original
2121 people have browsed it

Let’s take a look at the renderings first:

Share the detailed method of creating card-style images with 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>
Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

For more detailed methods of sharing CSS3 card-style images, please pay attention to the PHP Chinese website for related articles!

Related labels：
CSS3 卡片式图片
source：php.cn
Previous article：Detailed introduction to CSS margin knowledge points Next article：Detailed process analysis of making thumbnails with CSS3
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
I'm having trouble with a CSS grid where the height isn't what I expected, what mistakes might I be making? I'm currently learning CSS grids and was asked to make this card by breaking it into a gri...
From 2024-04-06 12:52:14
0
1
339
CSS row class makes some elements go out of frame, while they should be static and fixed to the bottom of the display My page currently looks like this. After adding the row class so that the two elements are...
From 2024-04-03 18:48:12
0
1
281
Create diverse card layouts using a single grid or Flex: a practical guide I'm trying to make a responsive card layout like the one pictured. What I'm currently doin...
From 2024-04-02 21:07:36
0
2
377
Responsive image and text Div side by side So I'm trying to create a template where one div is an image and the other is text with a ...
From 2024-04-02 08:59:38
0
1
349
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template