css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例)

在前端网页开发的时候,往往会用到一些渐变色的效果,这样可以使得前端页面更加美观。那么这些渐变效果是如何用css代码实现出来的?本章就给大家带来css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例),介绍css 渐变样式和如何实现css渐变。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

 

一、css 背景色渐变 样式

1. css 线性背景渐变样式

语法:

1

background-image: linear-gradient(<point> || <angle>, <stop>, <stop> , <stop>)

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比。

代码(考虑浏览器兼容性):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css背景渐变--线性渐变</title>

        <style>

            .demo{

                width:500 ;

                height: 300;

                margin: 50px auto;

            }

            .demo *{

                width: 200px;

                height: 200px;

                margin: 20px;

                text-align: center;

                line-height: 200px;

                color: #fff;

                font-size: 16px;

                float: left;

            }

            .demo1{

                /* 底色 */

                background-color: #fd0d0d;

                /* chrome 2+, safari 4+; multiple color stops */

                background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));

                /* chrome 10+, safari 5.1+ */

                background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);

                /* firefox; multiple color stops */

                background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);

                /* ie 6+ */

                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c');

                /* ie8 + */

                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c')";

                /* ie10 */

                background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);

                /* opera 11.1 */

                background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);

                /* 标准写法 */

                background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);

 

            }

            .demo2{

                /* 底色 */

                background-color:#d41a1a;

                /* chrome 2+, safari 4+; multiple color stops */

                background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));

                /* chrome 10+, safari 5.1+ */

                background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);

                /* firefox; multiple color stops */

                background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);

                /* ie10 */

                background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);

                /* opera 11.1 */

                background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);

                /* 标准写法 */

                background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

 

            }

        </style>

    </head>

    <body>

        <div class="demo">

            <div class="demo1">基本线性渐变--自上而下</div>

            <div class="demo2">基本线性渐变--45度角</div>

        </div>

    </body>

</html>

效果图:

5.jpg

可以看出两个线性渐变的区别就在于background-image: linear-gradient();里的三个颜色值的第一个颜色值(#fd0d0d)变成了角度值:45deg。

2. css 径向背景渐变样式

css径向颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样,它不是沿着一个方向渐变,而是以一个点为中心,向四周辐射渐变,360度的。目前除了IE外的所有浏览器都支持css径向颜色渐变(Radial Gradients),但它们也都有各自不同的语法

语法:

1

background-image: radial-gradient([<position> || <angle>],[<shape> || <size>],<stop>,<stop>,<stop>)

代码实例(考虑浏览器兼容性):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css背景渐变--径向渐变</title>

        <style>

            .demo{

                width:500px ;

                height:200px;

                margin: 50px auto;

            }

            .demo *{

                width:200px ;

                height:200px;

                margin: 50px 15px;

                float: left;

            }

            .demo1{

                background-image: -moz-radial-gradient(#ecff05, red);

                background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */

                background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */

                background-image: radial-gradient(#ecff05, red);

            }

            .demo2{

                background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);

                background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);

                background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);

            }

        </style>

    </head>

    <body>

        <div class="demo">

            <div class="demo1"></div>

            <div class="demo2"></div>

        </div>

    </body>

</html>

效果图:

6.jpg

二、css 字体文字渐变 样式

代码实例(考虑浏览器兼容性):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css字体文字渐变</title>

        <style>

            .demo{

                width:500px ;

                height:200px;

                margin: 50px auto;

                font-size: 20px;

                background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));

               /*必需加前缀 -webkit- 才支持这个text值 */

                -webkit-background-clip: text;

                /*text-fill-color会覆盖color所定义的字体颜色: */

                -webkit-text-fill-color: transparent;

            }

        </style>

    </head>

    <body>

        <div class="demo">css字体文字渐变,css字体文字渐变</div>

    </body>

</html>

效果图:

7.jpg

核心代码:

background-image:定义用到的渐变颜色范围;
-webkit-background-clip: text----以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉;
-webkit-text-fill-color: transparent---检索或设置对象中的文字填充颜色。

注:

由于目前text-fill-color属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色,IE下就更不用说了。

 

来源:http://www.php.cn/css-tutorial-409954.html

  • 10
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值