前端学习CSS3(day2)渐变、背景

一、渐变
background: linear-gradient(0deg,red,orange,yellow,green, #00ffff,blue,purple);
方向，开始颜色 位置，结束颜色 位置，开始颜色 位置…
background: radial-gradient(circle at 50px 50px,#eeffff,#334455);
径向渐变指从一个中心点开始沿着四周产生渐变效果
相关参数
确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
repeating-radial-gradient 重复渐变

二、背景
1、background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
2、background-origin:属性规定 background-position 属性相对于什么位置来定位
3、background-clip: 属性规定背景的绘制区
就是设置最终显示那些区域
border-box:其实是显示border及以内的内容
padding-box:其实是显示padding及以内的内容
content-box:其实是显示content及以内的内容*/
background-clip: content-box;
4、平铺 background-repeat: space;
round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
no-repeat
5、滚动
fixed:背景图片的位置固定不变
scroll:当滚动容器的时候，背景图片也会跟随滚动*/
/local和scroll的区别：前提是滚动当前容器的内容
scroll:背景图片不会跟随内容一起滚动/
background-attachment: scroll;border-image: url("…/images/border1.png") 27 / 27px /0px round;