如何在保持交叉兼容性的同时使用CSS / CSS3来应用此效果

时间：2014-12-05 14:51:17

标签： html css html5 css3

我将如何实现这种布局：

那么如何让这些数字从内盒的顶部边框中弹出 使用css / css3？

注意：这将被用作（比方说）PDF的索引， 以下是我到目前为止的内容：

.box1 {
        width: 65%;
        margin: 10px;
        background: #222;
        border: 1px solid #444444;
        border-radius: 4px;
        background: #141414;
        float: left;
        }
    
        .header1 {
        height: 34px;
        border-bottom: 1px solid #444444;
        
        background: rgb(68,68,68);
        background: -moz-linear-gradient(top, rgba(68,68,68,1) 0%, rgba(47,47,47,1) 49%, rgba(19,19,19,1)             50%, rgba(1,1,1,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,1)), color-stop(49%,rgba(47,47,47,1)), color-stop(50%,rgba(19,19,19,1)), color-stop(100%,rgba(1,1,1,1)));
        background: -webkit-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
        background: -o-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
        background: -ms-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
        background: linear-gradient(to bottom, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444',  endColorstr='#010101',GradientType=0 );
        }
    
       .content1 {
        height: auto;
        position: relative;
        padding: 23px;
        }
    
       .inner_box2 {
     
        top: 25%;
        bottom: 25%;
        left: 25%;
        right: 25%;
        margin: 43px 5px;
        padding: 23px;
        border: 1px solid #969696;
        box-shadow:  inset 0 0 5px rgba(255,255,255,0.4);
        border-radius: 5px;
        background: #0f0f0f;
    
         }
<div class="box1">
    	<div class="header1"><h6>.:: lorem heading ::.</h6></div>
        <div class="content1">
       
        <div class="inner_box2">
        lorem ipsum dorom
        </div>
       
       <div class="inner_box2">
       lorem ipsum
       </div>
       
       <div class="inner_box2">
       lorem ipsum
       </div>
    
       </div></div>

2 个答案:

答案 0 :(得分：1)

您必须同时更改标记和CSS。我建议在标记中添加数字，而不是在css中添加，以便您可以动态更改它。

我创建了fiddle for you 

<div class="box1">
        <div class="header1"><h6>.:: lorem heading ::.</h6></div>
        <div class="content1">

            <div class="inner_box2">
                <div class="number">1</div>
                lorem ipsum dorom
            </div>

           <div class="inner_box2">
               <div class="number">2</div>
               lorem ipsum
           </div>

           <div class="inner_box2">
               <div class="number">3</div>
               lorem ipsum
           </div>

       </div>
</div>

.number的css是：

.number{
    position:absolute;
    color:red;
    line-height:30px; /* make it as tall as you like */

    bottom:100%; /* make it stick to the top*/
    margin-bottom:1px; /* dont cover border */
    top:auto;

    left:50%; /* make it centered */
    width:20px;
    margin-left:-10px;

    /* Add cross-browser gradient background */
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top,  #000000 0%, #2e2e2e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#2e2e2e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #000000 0%,#2e2e2e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #000000 0%,#2e2e2e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #000000 0%,#2e2e2e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #000000 0%,#2e2e2e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2e2e2e',GradientType=0 ); /* IE6-9 */

    /* Border radius only for top corners */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}

答案 1 :(得分：0)

您可以使用:before伪元素和counter的组合来实现此功能，而无需额外的标记。应该比IE7更适合所有浏览器。

这是重要的部分：

.inner_box {
    counter-increment: boxCounter;
    position: relative;
}

.inner_box:before {
    content: counter(boxCounter);

    /* .... styling here .... */ 
}

完整演示：

.box1 {
    width: 65%;
    margin: 10px;
    background: #222;
    border: 1px solid #444444;
    border-radius: 4px;
    background: #141414;
    float: left;
}

.header1 {
    height: 34px;
    border-bottom: 1px solid #444444;
    
    background: rgb(68,68,68);
    background: -moz-linear-gradient(top, rgba(68,68,68,1) 0%, rgba(47,47,47,1) 49%, rgba(19,19,19,1)             50%, rgba(1,1,1,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,1)), color-stop(49%,rgba(47,47,47,1)), color-stop(50%,rgba(19,19,19,1)), color-stop(100%,rgba(1,1,1,1)));
    background: -webkit-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
    background: -o-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
    background: -ms-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
    background: linear-gradient(to bottom, rgba(68,68,68,1) 0%,rgba(47,47,47,1) 49%,rgba(19,19,19,1) 50%,rgba(1,1,1,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444',  endColorstr='#010101',GradientType=0 );
}

.content1 {
    height: auto;
    position: relative;
    padding: 23px;
}

.inner_box2 {
    margin: 43px 5px;
    padding: 23px;
    border: 1px solid #969696;
    box-shadow:  inset 0 0 5px rgba(255,255,255,0.4);
    border-radius: 5px;
    background: #0f0f0f;
    
}

/* Counter code ... */

.inner_box2 {
    counter-increment: boxCounter;
    position: relative;
    color: #FFF;
    text-align: center;
}

.inner_box2:before {
    content: counter(boxCounter);
    position: absolute;
    width: 30px;
    height: 30px;
    color: red;
    top: -30px;
    left: 50%;
    margin-left: -15px;
    text-align: center;
    line-height: 30px;
    
    background: rgb(10,0,0);
    background: -moz-linear-gradient(top, rgba(10,0,0,1) 0%, rgba(117,117,117,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(10,0,0,1)), color-stop(100%,rgba(117,117,117,1)));
    background: -webkit-linear-gradient(top, rgba(10,0,0,1) 0%,rgba(117,117,117,1) 100%);
    background: -o-linear-gradient(top, rgba(10,0,0,1) 0%,rgba(117,117,117,1) 100%);
    background: -ms-linear-gradient(top, rgba(10,0,0,1) 0%,rgba(117,117,117,1) 100%);
    background: linear-gradient(to bottom, rgba(10,0,0,1) 0%,rgba(117,117,117,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0000', endColorstr='#757575',GradientType=0 );
}
<div class="box1">
    <div class="header1">
        <h6>.:: lorem heading ::.</h6>
    </div>
    <div class="content1">

        <div class="inner_box2">
            lorem ipsum dorom
        </div>

        <div class="inner_box2">
            lorem ipsum
        </div>

        <div class="inner_box2">
            lorem ipsum
        </div>

    </div>
</div>

相关问题
最新问题