用阴影做卡片效果

最新推荐文章于 2024-03-20 16:12:40 发布

chenzhawu3547

最新推荐文章于 2024-03-20 16:12:40 发布

阅读量503

点赞数

原文链接：https://my.oschina.net/u/4004801/blog/3031396

版权

1.文字卡片效果

<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}
</style>
</head>
<body>

<h2>卡片</h2>

<p>box-shadow 属性用来可以创建纸质样式卡片:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

2.图片阴影效果

<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h2> 卡片</h2>

<p>box-shadow属性可以用来创建纸质样式卡片:</p>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

转载于:https://my.oschina.net/u/4004801/blog/3031396

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenzhawu3547

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用阴影做卡片效果

1.文字卡片效果 <style>div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align...
复制链接

扫一扫