CSS3渐变和背景

文章目录
一、渐变

1. linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
2. radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
   二、背景
   1.background-size属性：
3. background-origin:
4. background-clip:

一、渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

1. linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
   a) 语法：
   linear-gradient( [ || ,]? , [, ]* )
   b) 参数说明：

第一个参数表示线性渐变的方向，
to left：设置渐变为从右到左。相当于: 270deg;
to right：设置渐变从左到右。相当于: 90deg;
to top：设置渐变从下到上。相当于: 0deg;
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
第二个参数是起点颜色,可以指定颜色的位置
第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变
c) 示例：
div{
width: 400px;
height: 400px;
margin: 100px auto;
background: linear-gradient(0deg,red,orange,yellow,green, #00ffff,blue,purple);
}
2. radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
a) 语法：
= radial-gradient([ [ || ] [ at ]? , | at , ]?[ , ]+)
b) 取值：

确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
：指定颜色。Rgba hsla
c) 一些案例示例代码：

.div1{
width: 200px;
height: 200px;
margin: 10px auto;
/设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色/
background: radial-gradient(circle at center,red,blue);
}
.div2{
width: 200px;
height: 200px;
border-radius: 100px;
margin: 10px auto;
/设置径向渐变效果:从指定坐开始，从一种颜色到另外一种颜色/
background: radial-gradient(circle at 50px 50px,#eeffff,#334455);
}
.div3{
width: 200px;
height: 200px;
border-radius: 100px;
margin: 10px auto;
/设置径向渐变效果:从指定坐标开始，从一种颜色到另外一种颜色，同时指定颜色的位置/
background: radial-gradient(circle at 50px 50px,#eeffff 0%,#666 70%,rgba(33,33,33,0.8) 80%);
}
/指定渐变的形状/
.div4{
width: 200px;
height: 100px;
margin: 10px auto;
/设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色/
background: radial-gradient(ellipse at center,red,green,blue);
}
/指定渐变的size/
.div5{
width: 200px;
height: 100px;
margin: 10px auto;
/设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色,同时指定了大小为渐变到最近的边/
background: radial-gradient(circle closest-side at center,red,green,blue);
}
/使用系统提供的位置设置/
.div6{
width: 200px;
height: 100px;
margin: 10px auto;
/设置径向渐变效果:从右上角点开始，从一种颜色到另外一种颜色/
background: radial-gradient(circle at top right,red,green,blue);
}

二、背景
1.background-size属性：
CSS里的background-size属性能够让程序员决定如何在指定的元素里展示,它通过改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。往往建议不要将图放大，如果有需要，尽量让图缩小

语法：
background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
参数说明：
auto：此值为默认值，保持背景图片的原始高度和宽度;
number：此值设置具体的值，可以改变背景图片的大小;
percentage：此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小
contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止。
当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。
使用案例：

2. background-origin:
   作用：background-origin 属性规定 background-position 属性相对于什么位置来定位。默认值是left top左上角
   语法：background-origin: padding-box|border-box|content-box;
   属性值说明：
   padding-box 背景图像相对于内边距框来定位。
   border-box 背景图像相对于边框盒来定位。
   content-box 背景图像相对于内容框来定位。
3. background-clip:
   background-clip 属性规定背景的绘制区：虽然是设置裁切，但是控制的是显示。说白了，就是设置最终显示那些区域
   语法：background-clip: border-box|padding-box|content-box;
   属性值说明：
   值 描述
   border-box 背景被裁剪到边框盒。
   padding-box 背景被裁剪到内边距框。
   content-box 背景被裁剪到内容框。
   ————————————————
   版权声明：本文为CSDN博主「Welkin_qing」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
   原文链接：https://blog.csdn.net/Welkin_qing/article/details/86657472