zoukankan      html  css  js  c++  java
  • 3D圆角

    <html>
    <head>
        <title>3D圆角</title>
        <style type="text/css">
            .raised
            {
                background: transparent;
                40%;
            }
            .raised h1, .raised p
            {
                margin: 0 10px;
            }
            .raised h1
            {
                font-size: 2em;
                color: #fff;
            }
            .raised p
            {
                padding-bottom: 0.5em;
            }
            .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b
            {
                display: block;
                overflow: hidden;
                font-size: 1px;
            }
            .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b
            {
                height: 1px;
            }
            .raised .b2
            {
                background: #ccc;
                border-left: 1px solid #fff;
                border-right: 1px solid #eee;
            }
            .raised .b3
            {
                background: #ccc;
                border-left: 1px solid #fff;
                border-right: 1px solid #ddd;
            }
            .raised .b4
            {
                background: #ccc;
                border-left: 1px solid #fff;
                border-right: 1px solid #aaa;
            }
            .raised .b4b
            {
                background: #ccc;
                border-left: 1px solid #eee;
                border-right: 1px solid #999;
            }
            .raised .b3b
            {
                background: #ccc;
                border-left: 1px solid #ddd;
                border-right: 1px solid #999;
            }
            .raised .b2b
            {
                background: #ccc;
                border-left: 1px solid #aaa;
                border-right: 1px solid #999;
            }
            .raised .b1
            {
                margin: 0 5px;
                background: #fff;
            }
            .raised .b2, .raised .b2b
            {
                margin: 0 3px;
                border- 0 2px;
            }
            .raised .b3, .raised .b3b
            {
                margin: 0 2px;
            }
            .raised .b4, .raised .b4b
            {
                height: 2px;
                margin: 0 1px;
            }
            .raised .b1b
            {
                margin: 0 5px;
                background: #999;
            }
            .raised .boxcontent
            {
                display: block;
                background: #ccc;
                border-left: 1px solid #fff;
                border-right: 1px solid #999;
            }
        </style>
    </head>
    <body>
        <div class="raised">
            <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
            <div class="boxcontent">
                <h1>
                    3D圆角</h1>
            </div>
            <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
        </div>
    </body>
    </html>

  • 相关阅读:
    销傲中国式销售过程管理系统功能概述
    真正高效的SQLSERVER分页查询(多种方案)
    request.getScheme()的使用方法
    用户'sa'登录失败(错误18456)解决方案图解
    在SQL Server中创建用户角色及授权
    大话设计模式--外观模式 Facade -- C++实现实例
    大话设计模式--模板方法模式 TemplateMethod -- C++ 实现
    大话设计模式--原型模式 Prototype -- C++实现
    C++拷贝构造函数(深拷贝,浅拷贝)
    大话设计模式--工厂方法模式 Factory Method -- C++实现
  • 原文地址:https://www.cnblogs.com/ajun/p/2442710.html
Copyright © 2011-2022 走看看