Use CSS as the escape Operator

Document directory

• CSS:
• HTML:
• Class description
• CSS description
• Renewal usage
• Computing Environment

Most of the versions on the company's website used Google for tests over the past few days. Many of Google's cutting-edge products are made with CSS, I used table + image more than I used before. This trick is really easy to use and I will share it with you.

The effect is as follows:

 

CSS:

<style type="text/css">

.roundBorder

{

    display: block;

}

.roundBorder *

{

    background: white;

    display: block;

    height: 1px;

    overflow: hidden;

}

.roundBorderLayer1

{

    border-left: 1px solid #C4C4C4;

    border-right: 1px solid #C4C4C4;

    margin: 0px 1px;

}

.roundBorderLayer2

{

    border-left: 1px solid #D3D4D5;

    border-right: 1px solid #D3D4D5;

    margin: 0px 2px;

    padding: 0px;

}

.roundBorderLayer3

{            

    background: #C4C4C4;

    border-left: 1px solid #D3D4D5;

    border-right: 1px solid #D3D4D5;

    margin: 0px 3px;

}

.roundContent

{

    background:white;

    border-left: 1px solid #C4C4C4;

    border-right: 1px solid #C4C4C4;

    overflow: hidden;

    padding: 4px 10px;

}

</style>

HTML:

<b class="roundBorder">

    <b class="roundBorderLayer3"></b>

    <b class="roundBorderLayer2"></b>

    <b class="roundBorderLayer1"></b>

</b>

<div class="roundContent">

    Hello!!

    <br/>

Use CSS as the encryption Operator

    <br/>

Really simple

</div>

<b class="roundBorder">

    <b class="roundBorderLayer1"></b>

    <b class="roundBorderLayer2"></b>

    <b class="roundBorderLayer3"></b>

</b>

 

 

Class description

RoundborderFor the three layers in a group

Roundborderlayer1For left and right margin 1px and left and right border 1px

Roundborderlayer2The role of left and right margin 2px and left and right border 1px

Roundborderlayer3And left and right margin 3px and left and right border 1px, while the upper and lower limit of the effect is completed using background.

RoundcontentFor left and right margin 0px and left and right border 1px

Its composition is

CSS description

In fact, the CSS used is not very concise.

Display: block;Struct indicates a partition (because B is inline, you don't need to add this segment when using Div, and why does Google use B instead of div, I guess there is a relationship between border and the small number of words ).

Height: 1px;Set the height to 1px.

Overflow: hidden;If it exceeds the limit, it will be hidden, and it will not be added. If it is afraid that B will have internal problems, it will be added.

Border-left: 1px solid # c4c4c4;The left gray solid heart is 1px dark solid.

Border-Right: 1px solid # c4c4c4;Right-gray solid heart 1px solid loss.

Margin: 0px 1px;1px border.

Just click it.

Renewal usage

If you are a friend of jquery, you can use a simpler method.

The CSS is the same. html only uses <Div class = "roundcontent"> </div>.

Use the following JavaScript to automatically add <B> to accelerate the preparation of HTML.

<script type="text/javascript">

    $(function() { addroundBorder(); })

    function addroundBorder() {

        var $content = $(".roundContent");

        $content.before('<b class="roundBorder"><b class="roundBorderLayer3"></b><b class="roundBorderLayer2"></b><b class="roundBorderLayer1"></b></b>');

        $content.after('<b class="roundBorder"><b class="roundBorderLayer1"></b><b class="roundBorderLayer2"></b><b class="roundBorderLayer3"></b></b>');

    }

</script>

 

 

 

 

Computing Environment

IE6 is normal (but sometimes it may be a little strange to run away ).

IE7 + normal

Firefox 3 + normal

Chrome normal