CSS进阶

n.css设置背景渐变色

1.线性渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

* {
    background: linear-gradient(渐变方向,开始颜色 偏移量...,结束颜色 偏移量);
}

/* 
渐变方向：
1.关键字指示
to top, to bottom, to left top,等，left和top等关键字的前后顺序无所谓！
2.deg角度指示：
按照钟表指针方向渐变，0deg为十二点（从下往上），90deg为三点（从左往右），225deg为左下往右上。
0~360deg，也可以是负数。

颜色
用rgb()rgba()或"#xxxxxx"都行，可填写多个达到多色渐变的效果；

偏移值
设置颜色偏移值，不太明白，感觉很少用到；
*/

repeating-linear-gradient()：重复的线性渐变，语法和linear-gradient()相同。

2.径向渐变/放射渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

* {
    background: radial-gradient(center,shape,size,start-color...,last-color);
}

/*
center：渐变起点的位置，可以为两个百分比数值，默认是图形正中心；
shape：渐变形状，ellipse椭圆，circl圆，默认椭圆。如果容器为正方形则二者相同。
上面这俩属性我设置了但是没用！可恶！也不知道问题出在哪儿！

size：渐变大小，规定渐变到哪里停止，有四个值：
	closest-side：最近边
	farthest-side：最远边
	closest-corner：最近角
	farthest-corner：最远角

*/

repeating-radial-gradient()：重复的线性渐变，语法和radial-gradient()相同。

属性过渡

transition属性可用来给元素添加某个属性的过渡效果

1

transition: all .2s ease-in-out;

transition有四个子属性：

• transition-property

  选择对哪个属性应用过渡，可选值有all、none或者自定义属性名，多个属性之间用逗号隔开：

  1	transition-property: border,background;

• transition-duration

  过渡动画持续时间，单位为’s’(秒)且不可省略，默认值为0，如：

  1	transition-duration: .8s;

• transition-timing-function

  动画过渡的线性规律（又称时间曲线），自带6个值：

  • ease：默认值，逐渐变慢；
  • linear：匀速，线性；
  • ease-in：加速；
  • ease-out：减速；
  • ease-in-out：先加速后减速。

• transition-delay

  设置动画延迟，值也是秒，写法与transition-duration相同。

一般我们使用复合写法，如：

1

transition: all .2s ease-in-out;

提示：在实际开发中，建议给元素原属性也加上transition属性，这样就能避免元素恢复原样貌时没有过渡动画的bug。

变形

transform属性可使元素变形，包括位移、旋转、缩放、倾斜：

阴影

使用box-shadow和text-shadow可以给元素和文本添加阴影：

1
2
3

box-shadow: h-shadow v-shadow blur spread color inset(outset);

text-shadow: h-shadow v-shadow blur color;

• h-shadow：必需，阴影水平方向上位置，正数向右，负数向左，单位px；
• v-shadow：必需，阴影垂直方向上位置，正数向下，负数向上，单位px；
• blur：可选，阴影模糊距离，单位px；
• spread：可选，阴影的尺寸；
• color：可选，阴影颜色，值可以是rgba(3,204,204,0.2)或rgb(1,1,1)类型或直接用#bbdbc6hex型数值；
• inset/outset：可选，设置投影为外投影或内投影，默认外投影。

添加多个阴影，用逗号分隔开即可：

1

box-shadow: 1px 1px 5px 0 blue inset, 2px 2px 10px rgba(240,240,240,0.2) outset;

滤镜

filter属性可以给元素添加图像滤镜：