CSS基础知识（五）CSS背景 阴影及圆角边框

一、CSS背景属性

1.背景颜色（background-color）

属性值：transparent(透明的)或color(颜色)

2.背景图片（background-image）

属性值：none(没有)或url(使用绝对或相对地址指定背景图像)

优点：非常便于控制位置（精灵图也是一种运用场景）

3.背景平铺（background-repeat）

属性值：repeat|no-repeat|repeat-x|repeat-y

背景图片会压住背景颜色

4.背景图片位置（background-position）

background-position：x y;

1. x坐标和y坐标可使用方位名词或精确单位

2. 方位名词
   a. x可为left | center | right ,y可为top | center | bottom
   b. top left 和 left top 效果一致（与顺序无关）
   c. 若只指定一个方位名词，另一个值忽略，则第二个值默认为居中对齐

3. 精确单位
   a.先x坐标后y坐标
   b.若只指定一个值，则为x,另一个值为垂直居中

4. 混合单位：若混合使用，第一个值为水平x,第二个值为垂直y
   

5.背景图片固定（background-attachment）

属性值：scroll（随内容滚动）|  fixed（背景固定）

6.背景复合写法（background）

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

7.背景色半透明（CSS3提供了背景颜色半透明的效果）

• background：rgba(0,0,0,.3);
• red green blue alpha(透明度 范围0~1）
• 习惯把0.3的0省掉
• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

二、CSS阴影（box-shadow）

1.盒子阴影

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

属性值	特点
h-shadow	必需，水平阴影位置，可负
v-shadow	必需，垂直阴影位置，可负
blur	可选，模糊距离（虚实）
spread	可选，阴影尺寸（大小）
color	可选，阴影颜色rgba(0,0,0,.3)
inset	可选，将外部阴影（outset）改为内部阴影

• 默认为外阴影(outset)，但是不可以写这个单词，否则无效
• 盒子阴影不占用空间，不会影响其他盒子排列
• 鼠标经过div为div:hover {box-shadow: 10px 10px;}
  

2.文字阴影（text-shadow）

语法
text-shadow：h-shadow v-shadow blur color；

三、圆角边框（border-radius）

语法
border-radius：length;

• 半径原理：圆与边框的交集形成圆角效果
• 参数值可以为数值或百分比形式
• 若为正方形，想设置为圆，把数值改为高/宽的一半，或直接写为50%
• 若为矩形，设为高的一半即可
• 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角
• 分开写：border-top-left-radius | border-top-right-radius
  border-bottom-left-radius | border-bottom-right-radius