CSS3

颜色 (Color)

透明度：

opacity: 0.1;

opacity: 0.5;

opacity: 0.9;

filter:alpha(opacity=50)

RGBA：

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

注意: RGBA是在RGB的基础上多了控制alpha透明度的参数。

文本阴影

语法:

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

CSS3 @font-face 规则

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您您找到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到

用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的

firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded

OpenType)。

CSS3 @font-face 规则

使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文

件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style> 
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
</style>

圆角边框 (Border)

语法

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；//左上角、右上角、右下角、左下角

CSS3 边框阴影

在 CSS3 中，box-shadow 用于向方框添加阴影：

语法

•box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

CSS3 多重背景图片

CSS3 允许您为元素使用多个背景图像。

为 body 元素设置两幅背景图片：

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

渐变 (Gradients) ——线性渐变

background: linear-gradient(angle,颜色  0%,颜色  50% ,颜色 100%)

通过角度来确定渐变的方向。

后边的参数，表示渐变的颜色和位置。可以插入更多的颜色值。

可以用rgba产生渐隐效果

angle: left,right,top,buttom,30deg

to left to top left ，1turn 1圈

repeating-linear-gradient 重复渐变

渐变 (Gradients) ——径向渐变

background: radial-gradient(shape size at position ,颜色  0%,颜色  50%, 颜色 100%)
background:radial-gradient(circle at 50px 50px,#fff,#000)
<shape>：主要用来定义径向渐变的形状。
 circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
 ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。  
    
    
size 大小 径向渐变的大小
1）length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
2）percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
3)  英文单词 
    
<size>：主要用来确定径向渐变的结束形状大小。
 closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
 closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
 farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
 farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

background-image: -webkit-radial-gradient(closest-side at 30% 50% ,#0f0,#030,blue);
    
position 位置
<position>：主要用来定义径向渐变的圆心位置。
1）length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
2）percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
3）英文单词
     left：设置左边为径向渐变圆心的横坐标值。
     center：设置中间为径向渐变圆心的横坐标值或纵坐标。
     right：设置右边为径向渐变圆心的横坐标值。
     top：设置顶部为径向渐变圆心的纵标值。
     bottom：设置底部为径向渐变圆心的纵标值。  
     at bottom 

渐进增强（Progressive Enhancement）：

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

优雅降级（Graceful Degradation）：

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

两者之间的微妙差别：

在本质上：“它们是看待同种事物的两种观点”，“优雅降级”和“渐进增强”的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同

渐进增强观点：

关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

优雅降级观点：

认为应该针对那些认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

广义和狭义不同视角：

1.广义：其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级。(比如IE8，这个基准线对于我，是允许使用javascript、cookie和css的IE8浏览器)

2.狭义：渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。（保证内容）

渐进增强和优雅降级在工作流程上面有什么区别？

1.渐进增强（progressive enhancement）：一开始只构建站点的最少特性，保证他们的内容，然后不断地对版本较高的浏览器追加不同的功能。

2.优雅降级（graceful degradation）：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，就是针对版本较低的浏览器进行测试和修复。