CSS3 --- 盒子

1.设置文本阴影

语法：text-shadow:水平 垂直 模糊强度 阴影颜色; 例：

text-shadow:2px 2px 2px deep gray;

水平（必需）：正值向右，负值向左；

垂直（必需）：正值向下，负值向上；

模糊强度：0为最清晰，值越大阴影越模糊；

注意：文字、盒子都可以加多组阴影，例：text-shadow:2px 2px 2px red,-2px -2px 2px blue,... ...;

2.盒子阴影

语法：box-shadow:水平 垂直 模糊强度 模糊尺寸 颜色 内/外阴影;例：

box-shadow:2px 2px 2px 2px gray [outset];   //外阴影（默认），outset可以不写
box-shadow:2px 2px 2px 2px gray inset;    //内阴影

水平（必需）：正值向右，负值向左；

垂直（必需）：正值向下，负值向上；

模糊强度（必需）：0为最清晰，值越大阴影越模糊；

模糊尺寸：值越大阴影面积越大；

颜色（必需）：阴影颜色；

3.设置盒子圆角

语法：border-radius:左上 右上 右下 左下; 例：

border-radius:10px 15px 20px 25px;   //顺序为左上->右上->右下->左下，可单独设置

如果四个角圆角一致可简写：

border-radius:10px;   //四个圆角都为10px

4.设置半透明颜色

文字半透明：

color:rgba(255,0,0,0.3);   //文字为红色，透明度为0.3

背景半透明：

background:rgba(0,0,blue,0.8);   // 背景色为蓝色，透明度为0.8

注意：透明值越小，透明度越高；

5.设置背景图片的尺寸

background-size:宽度 高度；例：

background-size:400px 500px;   //如果背景图片过小，背景图片可以平铺

background-size:cover;   背景图片会把整个盒子（宽和高）填充满，不平铺；

background-size:contain;   背景图片将盒子的宽或者高完全覆盖就停止，不平铺；