css复习 background···

一、圆角 radius

border-radius:
数值：30px
半径大小
百分比：10%
x轴半径是元素宽度的百分比值
y轴半径是元素高度的百分比值
=>多值写法：
两个值：(左上右下)(右上左下)
(左上)(右上左下)(右下)
(左上) (右上)(右下)(左下)

=>单个值的写法：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

二、阴影 box-shadow

box-shadow:

1. inset(可选）如果设置inset了，那么就会变成内阴影，默认是outset。
   2.x x轴偏移量
   3.y y轴偏移量
   4.阴影宽度
   5.扩展半径（可选参数） 阴影先从边框 开始进行扩展，然后从拓展结束位置开始渲染阴影，拓展的颜色是设置的阴影颜色
   6.阴影颜色

rgba：
颜色值
r = red(0-255)
g = green(0-255)
b = blue(0-255)
a = alpha(0-1)
/父级设置透明之后影响到了子级,也变成了透明的/
/opacity: 0;/
/使用rgba修改颜色不会改变子级的颜色*/
阴影不占位置
同一个元素可以拥有多层阴影，每层阴影之间用逗号隔开

三、背景图

1.background-origin 背景图原点 （初始位置计算）
padding-box
背景图像相对于内边距框来定位。
border-box
背景图像相对于边框盒来定位。
content-box
背景图像相对于内容框来定位。
注意：这条样式，仅仅是控制了背景图位置0,0点坐标在何处
2.background-clip 背景图裁切（显示部分）
属性值
border-box
背景被裁剪到边框盒。
padding-box
背景被裁剪到内边距框。
content-box
背景被裁剪到内容框。
注意：这条样式控制的是元素那些部分可以填充上背景图
-webkit-background-clip: text;可以根据文字裁切，如图：

3.background-size
length具体长度值
设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
percentage百分比
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，是父级宽度的百分比，第二个值设置高度,是父级高度的百分比。 如果只设置一个值，则第二个值会被设置为 "auto"。
小例子：
显示固定个数的背景图片
cover
把背景图像拉伸或缩放至足够尺寸，以使背景图像完全覆盖背景区域。
contain
把背景图像拉伸或缩放至足够尺寸，以使其宽度和高度完全适应内容区域。

css3 提供的多背景图设置
写法：
多背景之间用逗号隔开
注意：
多背景图的覆盖问题

多值写法裁切和原点的先后顺序
原点在前
裁切在后

四、线性渐变

background: linear-gradient

参考http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html