一、渐变
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;