css3新增重要样式及属性——文字相关样式（文本阴影、字体引用）、边框样式（盒子阴影、圆角边框）、多重背景图片 、渐变（线性渐变、径向渐变）、过渡、渐进增强和优雅降级的区别、重绘和回流的区别

1、文字相关样式

透明度： opacity: 0.1; （取值范围0-1）

RGBA： color: rgba(255, 0, 0, 0.6);

 文本阴影：text-shadow: h-shadow  v-shadow    blur    color;
                   text-shadow:必填水平阴影的位置,允许负值  
                   h-shadow：必填垂直阴影的位置,允许负值  
                   blur：选填，模糊距离
                   color：选填，阴影的颜色，默认跟字体颜色一致

设置鼠标放上去出现阴影效果
.box{
	transition: .3s;
}
.box:hover{
	text-shadow:0 0 35px pink;
}

字体引用：

@font-face{
	font-family: "maozedong";
	src: url(../fonts/maozedong.ttf);
}
.box{
	font-family: "maozedong";
}

2、边框样式

  box-shadow: X轴偏移量 Y轴偏移量  [阴影模糊半径]  [阴影扩展半径]  [阴影颜色] [投影方式];
                       X轴偏移量和Y轴偏移量必填，可为负值
                       阴影模糊半径：选填，模糊距离
                       阴影扩展半径：选填，阴影尺寸
                       阴影颜色：选填，默认黑色
                       投影方式：选填，inset是内部投影，默认为外阴影   

设置鼠标放上去出现内阴影效果
.box{
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background-color: red;
	transition: .3s;
}
.box:hover{
	box-shadow:0 0 0 150px #fff inset;
}

 圆角边框：border-radius:   length/% ; 

border-radius:   一个值；         四个角都一样
border-radius: 值1 值2；    值1表示左上角、右下角；值2表示右上角、左下角
border-radius:值1 值2 值3； 值1是左上角；值2表右上角、左下角；值3表示右下角
border-radius:   值1   值2   值3   值4；//左上角、右上角、右下角、左下角

3、多重背景图片 

body{
   background-image:url(bg_flower.gif),
   url(bg_flower_2.gif);
}

多个背景之间用逗号隔开

4、 渐变

线性渐变：background: linear-gradient(angle,颜色  0%,颜色  50% ,颜色 100%)

                  repeating-linear-gradient   重复渐变

                  方向：渐变角度：单位deg ；to  英文单词  从左向右渐变

                  颜色：可以是数值加单位也可以是百分百

 径向渐变：background: radial-gradient(shape size at position ,颜色  0%,颜色  50%, 颜色 100%)

形状：ellipse  默认 椭圆形；circle  圆形

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

圆心位置：at  x位置  y位置；x，y取值：数值+单位、百分比、英文单词：left right center                         top bottom

重复径向渐变：background-image : repeating-radial-gradient()

例如：background:radial-gradient(circle at 50px 50px,#fff,#000)

5、过渡 

过渡属性    transition-property:

过渡持续时长    transition-duration:

过渡的速度    transition-timing-function:

• 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
• 2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
• 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
• 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
• 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
• 6、cubic-bezier(x1,y1,x2,y2)：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)  四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

过渡的延迟    transition-delay:

简写：transition: all 5s ease 0s;

6、渐进增强和优雅降级的区别 

渐进增强：开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能以达到更好的体验。

优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

区别：优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器的前一个版本。在这种设计下，旧版的浏览器被认为仅能提供最简单的的浏览体验。(优先关注最高级的，再考虑兼容)

渐进增强认为应关注于内容本身。会优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性，这使得渐进增强成为一种更为合理的设计范例。（先考虑兼容）

低版本用户居多，优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，优先采用优雅降级的开发流程。不过大多数情况下都是采用渐进增强的方式，因为它更加合理。

 7、重绘和回流的区别

 重绘：元素的结构（宽高、布局、显示隐藏、内部文字大小）未发生改变，只是元素的外观样式发生改变，比如背景颜色、内部文字颜色、边框颜色等。此时会引起浏览器重绘，显然重绘的速度快于回流。

回流：当render tree中的元素的宽高、布局、显示、隐藏或元素内部文字结结构发生改变时，会影响自身及其父元素、甚至追溯到更多的祖先元素发生改变，则会导致元素内部、周围甚至整个页面的重新渲染，页面发生重构，回流就产生了。

注意：回流一定会触发重绘，而重绘不一定会回流