实用的css3小实例---1、卡片效果

一、总结

一句话总结：

卡片效果主要是使用box-shadow属性： box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

 

1、box-shadow属性的语法及实例？

语法：box-shadow: h-shadow v-shadow blur spread color inset;
实例：box-shadow: 10px 10px 5px #888888;

 

 

二、实用的css3小实例

博客对应课程的视频位置：1、卡片效果

https://fanrenyi.com/video/12/37

 

​

 

1、效果图

实用的css3小实例---1、卡片效果_html


 


 

2、代码



1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>卡片效果</title> 
 6 <style>
 7 div.card {
 8   width: 250px;
 9   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
10   text-align: center;
11 }
12 
13 div.header {
14     background-color: #4CAF50;
15     color: white;
16     padding: 10px;
17     font-size: 40px;
18 }
19 
20 div.container {
21     padding: 10px;
22 }
23 </style>
24 </head>
25 <body>
26 
27 <h2>卡片</h2>
28 
29 <p>box-shadow 属性用来可以创建纸质样式卡片:</p>
30 
31 <div class="card">
32   <div class="header">
33     <h1>1</h1>
34   </div>
35 
36   <div class="container">
37     <p>January 1, 2016</p>
38   </div>
39 </div>
40 
41 </body>
42 </html>


 

 

3、box-shadow属性介绍

box-shadow属性可以设置一个或多个下拉阴影的框。

 

语法



box-shadow: h-shadow v-shadow blur spread color inset;


注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值

说明

h-shadow

必需的。水平阴影的位置。允许负值

v-shadow

必需的。垂直阴影的位置。允许负值

blur

可选。模糊距离

spread

可选。阴影的大小

color

可选。阴影的颜色。在​​CSS颜色值​​寻找颜色值的完整列表

inset

可选。从外层的阴影（开始时）改变阴影内侧阴影