[CSS] 製作自訂邊框的做法

參考: Transparent custom corners and borders, version 2

1. 製作一張含四個角的邊框圖，其中寬要設大一點，防止頁面被放大時邊框會破掉
2. 製作一張直線邊框的圖，不用太大，如果左右邊框不一樣的話就要做二張
3. html 的內容:

    <div class="cb">
        <div class="bt"> <!-- 上邊框線乃右圓角 -->
            <div></div> <!-- 左圓角 -->
        </div>
        <div class="i1"> <!-- 左邊框線 -->
        <div class="i2"> <!-- 右邊框線 -->
        <div class="i3"> <!-- 底色 -->
        <h1>Header</h1>
        <p>TEST</p>
        </div>
        </div>
        </div>
        <div class="bb"> <!-- 下方框線及右圓角 -->
            <div></div> <!-- 左圓角 -->
        </div>
    </div>

4. css 的內容:

/* Normal styling */
.cb {margin:0.5em 0;}
    /* Top corners and border */
.bt {
    height:17px;
    margin:0 0 0 18px;  /* 設定左邊界，將空間留給顯示左上邊角的 div */
    background:url(box.png) no-repeat 100% 0;  /* 將圖靠右上對齊，顯示上方框線及右上方的邊角 */
}
.bt div {
    position:relative;
    left:-18px;  /* 原本 bt 設定了左邊界，這裡要設負值讓 div 移回原本的位置 */
    width:18px;  /* 設定邊角的寬度，避免蓋掉右上邊角 */
    height:17px;
    background:url(box.png) no-repeat 0 0; /* 將圖靠左上對齊，顯示左上方的邊角 */
    font-size:0;
    line-height:0;
}
    /* Bottom corners and border */
.bb {
    height:14px;
    margin:0 0 0 12px;  /* 設定左邊界，將空間留給顯示左下邊角的 div */
    background:url(box.png) no-repeat 100% 100%; /* 將圖靠右下對齊，顯示右下方的邊角 */
}
.bb div {
    position:relative;
    left:-12px;   /* 原本 bb 設定了左邊界，這裡要設負值讓 div 移回原本的位置 */
    width:12px;  /* 設定邊角的寬度，避免蓋掉右下邊角 */
    height:14px;
    background:url(box.png) no-repeat 0 100%; /* 將圖靠左下對齊，顯示左下方的邊角 */
    font-size:0;
    line-height:0;
}
    /* Left border */
.i1 {
    padding:0 0 0 12px;  /* 設定左邊界，避免內容和邊框重疊 */
    background:url(borders.png) repeat-y 0 0;
}
    /* Right border */
.i2 {
    padding:0 12px 0 0;   /* 設定右邊界，避免內容和邊框重疊 */
    background:url(borders.png) repeat-y 100% 0;
}
    /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
    display:block;
    margin:0;
    padding:1px 10px;
    background:#fff;
}
    /* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}