03-CSS3背景与渐变 | 易学教程

CSS3的背景缩写

background: color position size repeat origin clip attachment image;//按照该顺序，不能省略

background-clip

background-clip: border-box | padding-box | content-box;　　//指定背景绘制区域//border-box：背景被裁剪到 边框盒//padding-box：背景被裁剪到 内边距框//content-box：背景被裁剪到 内容框

background-origin

background-origin: border-box | padding-box | content-box;　　//指定background-position属性应该是 相对位置//border-box：从边框开始//padding-box：从内边距开始//content-box：从内容区开始

　搭配：background-position:50px,70px;　　//水平方向偏移50px，垂直方向偏移70px

background-size

background-size: length | percentage | cover | contain;　　//指定背景图片大小background-size: 90px  80px;　　//把原有图片缩放到90×80，放到容器中。

background-size: 80%  auto;　　//图片水平方向压缩到容器的80%，垂直方向为图片本身高度

background-size: cover;　　//图片水平垂直方向都铺满整个容器

background-size: contain;　　//图片水平方向足够长的话就会铺满容器的宽度，高不变。

//图片垂直方向足够高的话就会铺满容器的高度，宽不变。

background-image

background-image: url(1.png),url(2.png);　　//允许元素使用多个背景图//第一个背景图会盖到第二个背景图上面。（第一个背景图可以适当做半透明的png格式）

线性渐变（使用角度）

background: linear-gradient(angle,color1,color2, ...);　　//从某个角度/方向开始，color1颜色 渐变到 color2颜色。

　//方向：上到下to bottom、下到上to top、左到右to right、右到左to left、左上到右下to bottom right、左下到右上to top right等；

　//角度：下到上0deg、左到右90deg等

background: linear-gradient(45deg, red,blue);   //从45deg的方向，从红色渐变到蓝色。

background: linear-gradient(red,blue 30%,green 60%);　　//默认从上到下渐变；0%到30% 红色渐变到蓝色，30%到60% 蓝色渐变到绿色，60%到100% 绿色。

　background: repeating-linear-gradient(red, yellow 10%, green 20%); 　　//重复的线性渐变

　//0-10%-20%，一个容器100%，所以会重复五遍

-webkit-linear-gradient（webkit内核浏览器兼容的写法），它的旋转角度为

径向渐变

background: radial-gradient(center,shape size,star-color, ... ,last-color);　　//从起点到终点，颜色从内到外，进行圆形渐变（从中间向外拉）

　圆心除了center外还可以，10% 20% | 10px 20px 这样从左上角顶点开始进行偏移

　shape（形状）有两种，ellipse椭圆(默认)，circle圆。如果高宽一样，设置哪一种都是圆形。

　//上面时颜色结点均匀分布的，下面展示一下不均匀分布的

　background: radial-gradient(center,circle,red,blue 20%,yellow30% ); //默认从圆心到对角线为100%

径向渐变（尺寸大小关键字）

background: radial-gradient(size,color1,color2, ...);　　//从圆心到size为100%，圆心不在中心点情况

　size值（当圆心不在中心点时）

　closest-side，从圆心到最近边为100%

　farthest-side，从圆心到最远边为100%

　closest-corner，从圆心到最近角为100%

　farthest-corner，从圆心到最远角为100%

　background: repeating-radial-gradient(red, yellow 10%, green 20%); //重复的径向渐变

　//0-10%-20%，一个容器100%，所以会重复五遍

IE6到IE9渐变

filter: progid:DXImageTransform.Microsoft.gradient(starColorstr='starColor',endColorstr='endColor',GradientType=0);

来源：https://www.cnblogs.com/mingliangge/p/12207641.html

标签

background

linear-gradient