CSS3怎么实现重复径向渐变效果

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

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

<!DOCTYPE>

<html>

<meta charset="utf-8">

<head>

    <title>CSS3创建重复径向渐变效果示例</title>

    <style type="text/css">

        .container{

            text-align:center;

            padding:20px 0;

            width:960px;

            margin: 0 auto;

        }

        .container div{

            width:200px;

            height:150px;

            display:inline-block;

            margin:2px;

            color:#ec8007;

            vertical-align: top;

            line-height: 230px;

            font-size: 20px;

        }

         .repeating-radial{

            background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);

        }

 

    </style>

</head>

<body>

<div class="container">

       <div class="repeating-radial">重复径向渐变</div>

</div>

</body>

</html>

重复径向渐变效果如下：

9ac889455b07d719ed9708cf02e1cfc.png

如上图所示，从中心开始颜色从#4b6c9c过渡到#5ac4ed，再从白色过渡到白色。于是就形成上图中蓝白条间隔的重复渐变效果。

75007e510dfb056353e49a2d12d77b4.png

上图是从#9492ff过渡到颜色#ccccff的重复径向渐变。

这里需要注意的就是，函数repeating-radial-gradient() 的使用。

repeating-radial-gradient()函数创建一个从原点辐射的重复渐变组成的<image> 。

repeating-radial-gradient()的语法与radial-gradient()相同。

本篇文章就是关于CSS3实现重复径向渐变效果的方法介绍，非常的简单，希望对需要的朋友有所帮助！

以上就是CSS3怎么实现重复径向渐变效果的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css3怎么实现重复径向渐变效果

更多相关阅读请进入《CSS3实现重复径向渐变效果》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...