圆形边框的渐变的实现

直接上代码：

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }


        .outbox {
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            padding: 5px;
            border-radius: 50%;
            background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);
            background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);
            background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);
        }

        .box {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #fff;
        }
    </style>

<div class="outbox">
　　<div class="box"></div>
</div>