• 【CSS3绘画】CSS3制作出来的Opera浏览器Logo


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>[CSS3绘画] CSS3制作出来的Opera浏览器Logo</title>
    <style type="text/css">
    body{ margin:50px; padding:0px;}
    div{ margin:0 auto; overflow:hidden;}
    .O{
    400px; height:420px;
    border:2px solid #FEA5A5;
    border-radius:200px;
    -moz-border-radius: 200px/210px; -webkit-border-radius: 200px 210px; border-radius: 200px/210px;

    background:#FFCBCB;
    background:-webkit-gradient(linear, center top, center bottom, from(#ffcbcb), to(#CF0109));
    background: -moz-linear-gradient(top, #ffcbcb, #ffcbcb, #CF0109);
    -moz-box-shadow:0px 50px 30px hsla(0,0%,0%,.2); -webkit-box-shadow:0px 50px 30px hsla(0,0%,0%,.2);
    position:relative;
    }
    .O_2{
    400px; height:360px;
    padding:25px 0px;
    border-radius:200px;-moz-border-radius: 200px/210px; -webkit-border-radius: 200px 210px; border-radius: 200px/210px;
    position:absolute; left:0px; top:7px;

    background:#FD8487;
    background:-webkit-gradient(linear, center top, center bottom, from(#FD8487), to(#A90203));
    background: -moz-linear-gradient(top, #f36569, #f36569, #A90203);
    }
    .O_3{
    194px; height:354px;
    padding:3px;
    border-radius:97px; -moz-border-radius: 97px/177px; -webkit-border-radius: 97px 177px; border-radius: 97px/177px;

    background:#CF3C3A;
    background:-webkit-gradient(linear, center top, center bottom, from(#CF3C3A), to(#D20000));
    background: -moz-linear-gradient(top, #CF3C3A, #CF3C3A, #D20000);
    }
    .O_4{
    174px; height:334px;
    padding:10px;

    border-radius:97px;-moz-border-radius: 97px/177px; -webkit-border-radius: 97px 177px; border-radius: 97px/177px;

    background:#9A0000;
    background:-webkit-gradient(linear, center top, center bottom, from(#9A0000), to(#B80000));
    background: -moz-linear-gradient(top, #9A0000, #9A0000, #B80000);
    }
    .O_5{
    174px; height:334px;

    border-radius:87px;-moz-border-radius: 87px/167px; -webkit-border-radius: 87px 167px; border-radius: 87px/167px;

    background:#fff;
    }


    </style>
    </head>

    <body>
    <div class="O">
    <div class="O_2">
    <div class="O_3">
    <div class="O_4">
    <div class="O_5"></div>
    </div>
    </div>
    </div>
    </div>
    <h2>支持浏览器 chrome、firefox、360</h2>
    <h3>原地址查看:http://www.w3cfuns.com/thread-5592900-1-1.html</h3>

    </body>
    </html>

  • 相关阅读:
    【IT学习资源】2013.10.30
    【转载】 Bash之read命令
    【书本目录】 -- ABS(advanced bash scripts)
    【转载】vSphere的使用
    【转载】 Linux命令 -- tr 转换字符
    【转载】Oracle的日常监控脚本
    【转载】Nginx基础:6.webcache缓存服务
    大学记忆(3)[三国杀(终)]
    大学记忆(1)[记忆之殇]
    大学记忆(2)[计算机]
  • 原文地址:https://www.cnblogs.com/xiaoky/p/3850771.html
Copyright © 2020-2023  润新知