滑动门技术 

        <style>
            .box{
                background: url(img/bottom-left.gif) no-repeat left bottom;
            }
            .box-outer{
                background: url(img/bottom-right.gif) no-repeat right bottom;
                padding-bottom: 1em;
            }
            .box-inner{
                background: url(img/top-left.gif) no-repeat left top;
            }
            .box h2{
                background: url(img/top-right.gif) no-repeat right top;
                padding-top: 1em;
            }
            .box h2,.box p{
                padding-left:1em ;
                padding-right: 1em;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box-outer">
                <div class="box-inner">
                    <h2>head</h2>
                    <p>关于CSS的滑动门技术，简单的说就是背景可以随着上面的字数的多少而自由收缩。</p>
                </div>
            </div>
        </div>
    </body>

当内容足够多就会把图片撑开，如下白色部分没有背景图了

css3可以有多个背景图像，可以这样写：ie不支持

        <style>
            .box{
                background-image: url(img/top-left.gif),url(img/top-right.gif),url(img/bottom-left.gif),url(img/bottom-right.gif);
                background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
                background-position: top left,top right,bottom left,bottom right;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h2>title</h2>
            <p>载有巴西甲级球队沙佩科恩斯球员的飞机在哥伦比亚坠机，超过70人遇难。根据《世界体育报》最新的报道，就在18天之前，梅西所在的阿根廷国家队乘坐的就是这架失事飞机。</p>
        </div>
    </body>

 

posted @ 2016-12-01 09:37  党兴明  阅读(368)  评论(0)  编辑  收藏  举报