首頁 > 其他

圓角框的製作

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

圖片資源和更多設計方式可以在下載圓角設計


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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More