Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

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

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

2094 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