首页 » CSS » CSS画iOS7图标

CSS画iOS7图标

2014-05-08-ios7
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <title>IOS 7</title>
    <style>
    .ios7 {
        position: relative;
        width: 250px;
        height: 250px;
        margin: 0 auto;
        text-align: center;
        background: #FFF;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, .1);
        border-radius: 40px;
        border: 1px solid #DDD;
    }
    .ios7 span {
        position: absolute;
        top: 0;
        left: 0;
        width: 250px;
        height: 250px;
        background: -webkit-radial-gradient(0 0, farthest-side, #24d88b, rgba(36, 216, 139, 0)), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(33%, #0881da), color-stop(66%, #9e48c5), color-stop(100%, #e5345e));
        font:200 250px/250px"Helvetica Neue", sans-serif;
        -webkit-font-smoothing: antialiased;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    </style>
</head>

<body>
    <div class="ios7">
        <span>7</span>
    </div>
</body>

</html>
此文章发表在 CSS. 将 固定链接 加入收藏.