圆角框的制作

最新推荐文章于 2021-06-01 04:50:04 发布

天使小宝

最新推荐文章于 2021-06-01 04:50:04 发布

阅读量1.5k

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/myjlvzlp/article/details/8275325

版权

HTML 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

13 篇文章 0 订阅

订阅专栏

图片资源和更多设计方式可以在下载圆角设计

5背景可变宽圆角框

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>5背景可变宽圆角框</title>
        <style>
            body{
                background: #ffff99;
                font: 12px/1.5 arial;
            }
            .rounded{
                width: 50%;
                background: url(images/1103images/left-top.gif) top left no-repeat;
            }
            .rounded h3{
                padding: 20px 20px 10px;
                margin: 0;
                background: url(images/1103images/right-top.gif) top right no-repeat;
            }
            .rounded .main{
                padding: 10px 20px;
                margin: -2em 0 0 0;
                background: url(images/1103images/right.gif) top right repeat-y;
            }
            .rounded .footer{
                background: url(images/1103images/left-bottom.gif) bottom left no-repeat;
            }
            .rounded .footer p{
                display: block;
                padding: 10px 10px 20px;
                margin: -2em 0 0 0;
                background: url(images/1103images/right-bottom.gif) bottom right no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="rounded">
            <h3>Article header</h3>
            <div class="main">
                <p>
                    这是一行文本，这里作为样例，显示在圆角框。<br />
                    这是一行文本，这里作为样例，显示在圆角框。
                </p>
                <p>
                    这是一行文本，这里作为样例，显示在圆角框。<br />
                    这是一行文本，这里作为样例，显示在圆角框。
                </p>
            </div>
            <div class="footer">
                <p>
                    这是版权信息文字。
                </p> 
            </div>
        </div>
    </body>
</html>

可变圆角框的设计(两张图片)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>可变圆角框的设计(两张图片)</title>
        <style type="text/css" media="screen">
            #rounded{
                background:#ffff00  url('images/top_1.gif') no-repeat;
                font: 12px/1.6 arial;
                width: 20%;
                padding: 0;
                margin:0 auto;
            }
            #rounded h3 {
                background: url('images/right-top.gif') no-repeat right top; 
                padding: 20px 20px 0; 
                font-size: 170%; 
                color: #000; 
                margin: 0;
            }
            #rounded p {
                margin: 0;
                text-indent:2em;
                background: url('images/bottom_1.gif') no-repeat left bottom;
            }
            #rounded span{
                padding: 10px 20px 18px;	  
                color: #1B220F; 
                display:block;
                background:url('images/right-bottom.gif') no-repeat right bottom;
            }
        </style>
    </head>
    <body>
        <div id="rounded">
            <h3>Unfixed Round</h3>
            <p>
                <span>这是一个不固定宽度的圆角框，由于是宽度不固定，因此制作起来复杂一些。这个圆角框的上下随着内容增多可以自由伸展，圆角不会被破坏。此外，设置为不同的宽度，也同样适用。</span></p>
        </div>
    </body>
</html>