CSS3-背景和渐变-D3

一，背景颜色background-color
可以用十六进制，rgb()，rgba()表示
padding区域是有背景颜色的

二，背景图片
1，基础
background-image:url();
用来设置背景图片，图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径
background-image:url(images/bg1.jpg);
如果样式表是外链的，那么要书写从scc出发到图片的路径，而不是从html出发

2，重复模式background-repeat
background-repeat:repeat（默认）
repeat:x,y均平铺
repeat-x：x平铺
repeat：y平铺
no-repeat：不平铺

***给背景图片加上背景颜色
background:write url();

三，背景尺寸background-size
1，background-size：100px 200px;(宽度 高度)
值也可以用百分比设置，表示盒子宽，高的百分之多少
需要等比例设置的值，写auto

2，background-size:contain
（将背景图片智能改变尺寸到可以容纳到盒子里）

background-size:cover
（将背景图片智能改变尺寸到可以撑满整个盒子）

四，背景裁切
background-clip
1,border-box：背景延伸到边框
2,padding-box：背景衍生到内边（padding）
3,content-box：背景被裁切到内容区域

五，背景固定
background-attachment
fixed：内外滚动条滚动，自己背景不动
local：内滚动条滚动自己背景动，外滚动条滚动背景不动
scroll：外滚动条滚动自己背景动，内滚动条滚动背景不动

六，渐变
1，径向渐变
background-image:radial-gradient(50% 50%,red,blue);
50% 50%：圆心坐标
red：圆心颜色
2，线性渐变
background-image:linear-gradient(to right,blue,red);（开始方向（从左到右），开始颜色，结束颜色）
background-image:linear-gradient(45deg,blue,red);（开始方向（45度），开始颜色，结束颜色）
background-image:linear-gradient(45deg,blue 20%,red);（可以用百分比定义它们出现的位置）

七，浏览器私有前缀
不同浏览器有不同的私有前缀，用来对实验性质的css属性加以标识
Chrome：-webkit-
Firefox：-moz-
IE、Edge：-ms-
欧朋：-o-