CSS3（背景和渐变）
作者：互联网
CSS3
1.背景
1.1背景图像区域（background-clip）
语法
background-clip:border-box;
值
| 值 | 意 |
|---|---|
| border-box | 背景被裁剪到边框 |
| padding-box | 背景被裁剪到内边距 |
| content-box | 边框被裁剪到内容 |
1.2背景图像定位（background-origin）
语法
background-origin:border-box;
值
| 值 | 意 |
|---|---|
| border-box | 边框处起定位 |
| padding-box | 内边距处起定位 |
| content-box | 内容处起定位 |
配合前篇中的css背景中的1.5.
1.3背景图像大小（background-size）
语法
有两个值，写一个值第二个值自动auto
background-origin:100%;
| 值 | 意 |
|---|---|
| 1px | 数值 |
| 100% | % |
| cover | 缩放多余裁剪。如何裁剪取决定位。 |
| contain | 缩放不裁剪，图片全显示。 |
1.3多重背景图像
语法
background-image:url(),url();
英文状态下逗号隔开，谁在前谁显示再前。
1.4 简写
语法顺序
background：颜色 位置 尺寸 填充样式 定位 从哪裁剪 图片状态 图片地址；
background：color position size repeat origin clip attachment image；
background:#f00 center 50% no-repeat content-box content-box fixef url();
2.渐变
2.1 线性渐变（linear-gradient(方向，颜色，颜色);）
2.1.1上下渐变
语法
background:-webkit-linear-gradient(#f00,#00f);
background: -moz-linear-gradient(#f00,#00f);
background: -o-linear-gradient(#f00,#00f);
background: linear-gradient(#f00,#00f);
不用写方向直接写颜色就行，颜色可是多个值。
2.1.2左右渐变
语法
background:-webkit-linear-gradient( left#f00,#00f);
background: -moz-linear-gradient( right,#f00,#00f);
background: -o-linear-gradient( right,#f00,#00f);
background: linear-gradient(to right,#f00,#00f);
兼容问题，不同内核不同写法
2.1.3对角渐变
语法(如：左上到右下的写法)
background:-webkit-linear-gradient( left top,#f00,#00f);
background: -moz-linear-gradient( right bottom,#f00,#00f);
background: -o-linear-gradient( right bottom ,#f00,#00f);
background: linear-gradient(to right bottom,#f00,#00f);
2.1.4角度渐变
语法
background:-webkit-linear-gradient( 45deg,#f00,#00f);
background: -moz-linear-gradient( 45deg,#f00,#00f);
background: -o-linear-gradient( 45deg,#f00,#00f);
background: linear-gradient( 45deg,#f00,#00f);
官方：
0deg 从下向上
90deg 从左向右
180deg 从上向下
-90deg 从右向左
webkit：
0deg 从左向右
90deg 从下向上
180deg 从右向左
-90deg 从上向下
== 带有内核的写到前面，默认写在后边，解决问题。==
2.1.5渐变色节点控制
语法
background:-webkit-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background: -moz-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background: -o-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background: linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
第一个颜色值不写节点度默认0%，最后一个则是100%
2.1.6渐变色透明度
语法
background:-webkit-linear-gradient( 45deg,#f00,#f000);
background: -moz-linear-gradient( 45deg,#f00,#f000);
background: -o-linear-gradient( 45deg,#f00,#f000);
background: linear-gradient( 45deg,#f00,#f000);
我们可以用rgba的值来写，第一种 rgba(255,255,255,1) 第二种 #FFFF
2.1.7重复渐变（repeating-linear-gradient();）
语法
background:-webkit-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
background: -moz-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
background: -o-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
background: repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
重复多少遍 取决最后一个百分比
2.2径向（半径）渐变（radial-gradient(颜色颜色);）
从内向外渐变
2.2.1渐变基本语法
语法
background:-webkit-radial-gradient(#f00 10%,#00f 50%);
background: -moz-radial-gradient(#f00 10%,#0f 50%);
background: -o-radial-gradient(#f00 10%,#00f 50%);
background: radial-gradient(#f00 10%,#00f 50%);
这里面的%是中心点到边界的长度%
2.2.2渐变的形状
语法
background:-webkit-radial-gradient(circle,#f00 10%,#00f 50%);
background: -moz-radial-gradient(circle,#f00 10%,#0f 50%);
background: -o-radial-gradient(circle,#f00 10%,#00f 50%);
background: radial-gradient(circle,#f00 10%,#00f 50%);
只有两个形状 圆（circle）和椭圆（ellipse），椭圆是默认值
2.2.3渐变的尺寸（ 值%看那个边或角）
语法
background:-webkit-radial-gradient(closest-side circle,#f00 10%,#00f 50%);
background: -moz-radial-gradient(closest-side circle,#f00 10%,#0f 50%);
background: -o-radial-gradient(closest-side circle,#f00 10%,#00f 50%);
background: radial-gradient(closest-side circle,#f00 10%,#00f 50%);
| 值 | 意 |
|---|---|
| closest-side | 最近边 |
| farthest-side | 最远边 |
| closest-corner | 最近角 |
| farthest-corner | 最远角 |
形状和尺寸是一个属性
2.2.4渐变的中心位置
语法
background:-webkit-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background: -moz-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);
background: -o-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background: radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
第一个值左30% 第二个值上50%
2.2.5重复渐变（ repeating-radial-gradient）
语法*
background:-webkit-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background: -moz-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);
background: -o-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background: repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
2.3 IE6-IE8渐变（用滤镜）
语法
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#0000ff',GradientType=0);
startColorstr 开始颜色
endColorstr 结束颜色
GradientType 渐变类型 ：值（0：线性上下|1：线性左右|2：第二个值到黑色，上下）
标签：CSS3,00f,gradient,背景,渐变,50%,f00,background,linear 来源： https://blog.csdn.net/qq_36519236/article/details/89316892