CSS3_线性渐变（linear-gradient）+ 盒子阴影（box-shadow）

-——css3的文章好久没有写过了。今天看到一个比较酷炫的属性——线性渐变（linear-gradient）,决定谈谈这个属性。

linear-gradient

——CSS3 grandient分为线性渐变(linear-gradient)和径向渐变（radial-gradient）。今天主要谈谈线性渐变。(PS:在IE下的实现需要通过IE特有的滤镜来实现。)

线性渐变的语法

先来看看Mozilla、Webkit、Opera下的语法

1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
2 
3 -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
4 
5 -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

参数说明：

1，第一个参数表示线性渐变的方向，top是从上到下，left是从左到右，如果定义了left top，那就是从左上角到右下角。
2，第二个和第三个参数分别是起点颜色和终点颜色。你可以在它们之前插入更多的参数，表示多种颜色的渐变。

线性渐变在Trident(IE)下的应用

1 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
2 
3 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr 表示终点颜色。GradientType 表示渐变类型，0 为缺省值，表示垂直渐变，1 表示水平渐变。

角度方向的渐变

——需要特别说明一下的就是角度方向的渐变

当指定渐变方向是角度的时候，它是一个由水平线与渐变线产生的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。

详情请参考这篇文章：

CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）

下面来看看box-shadow

box-shadow

——box-shadow作为CSS3的一个新属性，效果还是不错的。下面来看看它的语法

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

属性说明：

1，h-shadow : horizontal shadow 水平方向的阴影
2，v-shadow : vertical shadow 垂直方向的阴影
3，blur : 阴影模糊的距离
4，spread : 阴影的大小
5，color : 阴影的颜色
6，inset : 改变阴影的方向

如果你的审美还错，并且对这个属性理解不错，那这个属性还是可以发挥他较大的作用的。

例子

下面来看一个例子：

贴上代码

 1 *{
 2             margin:0;
 3             padding:0;
 4         }
 5         .box-wrapper{
 6             cursor: pointer;
 7             position: relative;
 8             width: 300px;
 9             height: 200px;
10             margin: 100px auto;
11             border-radius: 5px;
12             background: #fd6a7f;
13             overflow: hidden;
14             -webkit-transition:all .3s ease;
15             transition:all .3s ease;
16         }
17         .gradient{
18             cursor: pointer;
19             position: absolute;
20             top: 0;
21             left: -100%;
22             width: 100%;
23             height: 100%;
24             transform: skew(-25deg);
25             -o-transform:skew(-25deg);
26             -moz-transform:skew(-25deg);
27             -webkit-transform:skew(-25deg);
28             background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0.5),hsla(0,0%,100%,0));
29             -webkit-transition:all .3s ease;
30             transition:all .3s ease;
31         }
32         .box-wrapper:hover{
33             transform: translateY(-6px);
34             -webkit-transform: translateY(-6px);
35             -moz-transform:translateY(-6px);
36             box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
37             -webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
38             -moz-box-shadow:0 26px 40px -24px rgba(0,36,100,.5);
39         }
40         .box-wrapper:hover .gradient{
41             left: 100%;
42         }

CSS

1 <div class="box-wrapper">
2     <div class="gradient"></div>
3 </div>

以上内容，如有错误请指出，不甚感激。

来源：https://www.cnblogs.com/adelina-blog/p/7156126.html

标签

linear-gradient

box-shadow

css