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>

  • 相关阅读:
    顺序表的扩容
    顺序表的插入
    顺序表的构造
    C# ContentType: "application/json" 请求方式传json
    顺序表构造,插入,扩容操作
    顺序表
    线性表
    算法
    数据结构的分类
    什么是数据结构
  • 原文地址:https://www.cnblogs.com/ajun/p/2442710.html
Copyright © 2011-2022 走看看