答辩面试题

CSS3的新特性：

1、CSS3圆角、阴影、rgba

2、CSS3 transition动画

 3、CSS3 transition变换

4、CSS3 transition动画

CSS3过渡动画：

1、当所有属性一起改变时，用all

transition:all 500ms ease;

2、当所有的属性单独使用，或值不同

在哪产生动画、动画时间、运动曲线、延迟

transition:border-radius 500ms ease, width 500ms ease, height 500ms ease 1s,background-color 500ms ease 1.5s;

CSS3圆角、阴影、透明度：

一、圆角：数越大越圆

左上角为椭圆圆角：

                                        border-top-left-radius

左、右上角为正圆圆角：（两个一起用）

                                        border-top-left-radius

                                        border-top-right-radius

曲率半径为40的圆角矩形：

                                        border-radius: 40px;

最大200px，20%即40px：

                                        border-radius: 20%;

正圆：（圆形头像）

                                        border-radius:50%;

---

二、阴影

水平偏移 垂直偏移 羽化大小 扩展大小 颜色

box-shadow:10px 10px 10px 0px #bfa;

水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

box-shadow:0px 0px 20px 2px red inset;

---

三、透明度

透明度30%，文字也透明：

                                    opacity:0.3;

背景色变透明，但文字不会透明：

                                    background-color:rgba(255,215,0,0.3);

rgba：r-红色    g-绿色 b-蓝 a-透明度（0-完全透明  1-完全不透明）

边框透明：

                                    border:2px solid rgba(0,0,0,0.3);