zoukankan      html  css  js  c++  java
  • 【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>

  • 相关阅读:
    python爬虫笔记(3-1)re模块
    python爬虫笔记(2-2)xpath解析实例
    python爬虫笔记(2-1)Xpath解析
    python爬虫笔记(1-2)requests模块实例
    python爬虫笔记(1-1)requests模块:请求数据获取响应内容
    小程序上传图片,放大,删除。
    小程序中多个echarts折线图在同一个页面的使用
    vue传值 ---- >> 子传父,$emit()
    vue传值 ---- >> 父传子,props()
    离线webpack创建vue 项目
  • 原文地址:https://www.cnblogs.com/xiaoky/p/3850771.html
Copyright © 2011-2022 走看看