制作特殊的底框

html:

<div class="reds_panel_inner">

                        <p class="p1">略略 略 略 略 略略 略 略 略 略略 略 略 略 略略 略 略 略 略略 略 略 略 略略 略 略 略 略略 略 略 略 </p>

                        <p class="note">略略 略 略 略 略略 略 略 略 略略 略 略 略 </p>                       

                        <div class="cs_button_box">

                            <button>略略 略 略 略 </button>                   

                        </div>

                    </div>

css:

.reds_panel_inner  {

1. background-color: #fff4a3;
2. position: relative;
3. padding-bottom: 3rem;

}

.reds_panel_inner:after  {

1. content: '';
2. position: absolute;
3. display: block;
4. background: url(../img/red_bottom_bg.png) repeat-x;
5. height: 1rem;
6. width: 100%;
7. bottom: -.9rem;

}

底框图片,可用裁剪工具从psd上裁下来

效果图

另外一种底框:

html:

<div class="progress_outer">

                    <span>当前进度</span>

                    <span class="text_r">1/10</span>

                    <progress max="10" value="1"></progress>                   

                </div>

css:

.progress_outer  {

1. padding: 1rem 4%;
2. position: relative;

}

.progressn_box:after  {

1. content: '';
2. display: block;
3. width: 100%;
4. height: 16px;
5. background: url(../img/circle_bg.png) repeat-x;
6. position: absolute;
7. bottom: -13.5px;

}

图片,中间的白点才是

效果图

实现了波浪底框,如果图片处理还一点就不会那么泛光了