css3新增知识点

一.文本相关样式

1. text-shaow 文本阴影

text-shadow ： 水平方向阴影 垂直阴影 [模糊距离] [阴影颜色];

[ ]意思为可写可不写，以下都是

2.box-shaow 文本阴影

box-shadow： 水平阴影   垂直阴影  [模糊距离]   [阴影扩展半径]     [阴影颜色]     [投影方式]
阴影颜色：默认为黑色
投影方式：默认为外投影，若设置为inset，则为内投影

二.border-radius

1.border-radius: 值;

四个圆角都一样 
2.border-radius: 值1 值2;

---

   
  border-radius: 值1 值2 值3;
  值1左上角   值2右上角和左下角    值3是右下角

---

    border-radius: 值1   值2   值3   值4;
 值1左上角  值2是右上角  值3是右下角  值4是左下角

            
 

---

 

三.background-image

    1.  线性渐变

background-image：linear-gradient（渐变角度，颜色1  颜色1位置，颜色2  颜色2位置，.....）
  渐变角度：单位是deg    deg就是度
 英文单词也可以表示渐变方向  如to  right 从左到右线性渐变

2.   径向渐变
background-image：radial-gradient（形状shape，size at position，颜色1  颜色1位置，颜色2  颜色2位置，.....）

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

position  圆心位置： at   x  y
    x  y  取值：1.英文单词left   right    center    top  bottom 
                      2.数值+单位
                      3.百分比 
 

四、变换 transform 

移动：transform：translate(x , y);

1  translateX(数值+单位)  水平移动、

2  translateY(数值+单位)  垂直移动

旋转：transform： rotate(数值+deg);

rotateX(数值+deg)  绕x轴旋转

rotateY(数值+deg) 绕y轴旋转

rotateZ(数值+deg) 绕z轴旋转

perspective 透视 给父元素加值越大3d效果越明显）

 

缩放：transform:scale(x , y);

scaleX(数值)  水平缩放

scaleY(数值)  垂直缩放

scale(数值)  一个值时是等比例缩放

扭曲：transform:skew(数值+deg);

skewX(数值+deg)   x方向扭曲

skewY(数值+deg)  y方向扭曲

五.关键帧：

定义关键帧
                @keyframes name{
                from{}
                to{}

                也可以百分比
属性值：  animation-name: name;/*名称*/
                animation-duration: 1s;/*动画的持续时间*/
                /*animation-timing-function: linear;*/
                /*animation-timing-function: steps(10);/*步数*/
                /*animation-delay: 1s;/*延迟*/
                animation-iteration-count: infinite;/*动画的播放次数*/
                animation-direction: alternate;动画的运动方向
缩写:
animation:name（名称）s(时间）linear（速度）alternate（方向）；

之间空格隔开