CSS3新特性(阴影) (渐变) (过渡)

目录

一：阴影

1.文本阴影 text-shadow

2.盒子阴影 box-shadow

二：渐变 

 1.线性渐变

2.径向渐变 

三：过渡 transition

---

目录

一：阴影

1.文本阴影 text-shadow

        text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

语法：text-shadow: 水平阴影   垂直阴影   [模糊距离]    [阴影颜色];

值	描述
水平阴影	必需。水平阴影位置。允许负值。
垂直阴影	必需。垂直阴影位置。允许负值。
模糊距离	可选。模糊的距离。
阴影颜色	可选。阴影的颜色。

2.盒子阴影 box-shadow

语法：box-shadow: 水平阴影  垂直阴影  [模糊距离]  [阴影扩展半径]   [阴影颜色]   [投影方式]

值	描述
水平阴影	必需。水平阴影位置。允许负值。
垂直阴影	必需。垂直阴影位置。允许负值。
模糊距离	可选。模糊距离。
阴影扩展半径	可选。阴影的尺寸。
阴影颜色	可选。阴影的颜色。
投影方式	可选。将外部阴影 改为内部阴影。

二：渐变 

 1.线性渐变

        为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法：background-image：linear-gradient（渐变角度，  color1  color1位置，color2  color2位置，.....） 

2.径向渐变 

        为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：background-image：radial-gradient（形状shape，size   at   position，color1  color1位置，color2  color2位置，.....） 

 线性渐变向下/向上/向左/向右/对角方向  

径向渐变由其中心定义。 

三：过渡 transition

        CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

语法：transition: [过渡属性]   过渡效果花费时间   过渡效果时间曲线, ......

值	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

Tips:渐进增强和优雅降级

1.优雅降级

.transition {

          transition: all .5s;

       -o-transition: all .5s;

     -moz-transition: all .5s;

  -webkit-transition: all .5s;

}

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

2.渐进增强

.transition {

      -webkit-transition: all .5s;

      -moz-transition: all .5s;

      -o-transition: all .5s;

         transition: all .5s;

}

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

渐进增强就是相当于向上兼容，而优雅降级就相当于向下兼容