CSS3相关内容

一.阴影

1.盒子阴影

可以使用box-shadow属性为盒子添加阴影

语法：
box-shadow: h-shadow v-shadow blur spread color inset

值 + 描述

1. h-shadow :必需，水平阴影的位置，允许负值（负值向左，正值向右）
2. v-shadow :必需，垂直阴影的位置，允许负值(负值向上，正值向下)
3. blur 可选，模糊的程度
4. spread 可选，阴影的尺寸，阴影的大小
5. color 可选，阴影的颜色，通常为rgba(0,0,0, .3);
6. inset 可选，将外部阴影(outset)改为内部阴影

注意

1. 默认的是外阴影(outset),但是不可以写这个单词，否则导致阴影无效
2. 盒子阴影不占用空间，不会影响其他盒子排列

2.文字阴影

文字阴影用text-shadow属性将阴影应用于文本

语法：
text-shadow: h-shadow v-shadow blur color;

二.常见的图片格式

1. jpg图片格式：对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式
2. gif图片格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
3. png图片格式是一种新型的网络图片格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式
4. PSD图片格式PSD格式是photoshop的专用格式，里面存放图层，通道，遮罩等多种设计稿，对我们前端人员来说，最大的优点，可以从上面直接复制文字，获得图片，还可以测量大小和距离。

三.滤镜

CSS3滤镜filter
filter CSS属性将模糊或颜色偏移等图片效果应用于元素

语法：

filter：函数();
例如：filter：blur(5px);

blur模糊处理，数值越大越模糊,数值要跟单位

四.calc函数

语法：
width:calc(100% - 80px)

括号里面是+ - * /

注意
运算符两边需各加一个空格

五.过渡

过渡动画：从一个状态渐渐的过渡到另外一个状态

经常和hover一起搭配使用

语法：
transition:要过渡的属性 花费时间 运动曲线 何时开始；

1. 属性:想要变化的css属性，宽度高度，背景颜色 内外边距都可以，如果想要所有的属性都要变化过渡，写一个all就可以
2. 花费时间：单位是 秒（必须写单位）比如0.5s
3. 运动曲线：默认是ease(逐渐慢下来)(可以省略)
   linear（匀速）ease-in(加速) ease-out(减速) ease-in-out(先加速后减速)
4. 何时开始： 单位是秒（必须写单位）可以设置延迟触发时间 默认时间是0s(可以省略)

过渡的口诀：谁做过渡给谁加

   div{
         width:200px;
         height:100px;
         background-color: pink;
         transition: width .5s ease 1s;
   }
   div:hover{
      width:400px;
   }

1. 如果想要写多个属性，利用逗号进行分割
   例如： transition: width .5s ease ,height .5s;
2. 如果想要所有的属性都要变化过渡，写一个all就可以

经常这样写：

   div{
         width:200px;
         height:100px;
         background-color: pink;
         transition:all 0.5s;
   }
   div:hover{
      width:400px;
      height:200px;
      background:skyblue;
   }

六.广义的h5

广义的h5是HTML5本身+CSS3+javascript