css3第二节总结

颜色：
透明度：

opacity: 0.1;

opacity: 0.5;

opacity: 0.9;

filter:alpha(opacity=50)（只有IE8以下版本支持）

RGBA：

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

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

文本阴影：

语法:

text-shadow: h-shadow（必需。水平阴影的位置。允许负值）  v-shadow（必需。垂直阴影的位置。允许负值）    blur（可选。模糊的距离。）    color（可选。阴影的颜色）;

text-shadow: 0 0 20px #fefcc9,

             10px -10px 30px #feec85,    

             -20px -20px 40px #ffae34,

             20px -40px 50px #ec760c,

             -20px -60px 60px #cd4606,

             0 -80px 70px #973716,

             10px -90px 80px #451b0e;

CSS3 边框阴影

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

语法

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

       参考

       例如 div{box-shadow: 10px 10px 5px #888888;}

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: 20px 20px 20px 20px

语法

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

div{

border:2px solid;

border-radius:25px;

}

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   重复渐变

浏览器低版本需在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

                      过渡transition

一、transition-property（过度后填写要过度属性）:

transition-property ： none | all（全部） | [ <IDENT> ]

二、transition-duration（持续时间）:

transition-duration ： <time> [, <time>]*

<time>为数值，单位为s（秒）或者ms(毫秒

三、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-property

过度属性

                   多个属性名间有逗号隔开

或 用all表示

         transition-duration

过渡时间

                   单位：m秒或ms 毫秒

         transition-timing-function

过度速度

                   ease 默认 逐渐变慢

                   linear 匀速

                   ease-in加速

                   ease-out 减速

                   ease-in-out先加速后减速

                   cubic-bezier（x1 ，x2，y1，y2）

         transition-delay

过度延迟时间