需求：父級邊框固定，裡面的內容滾動
由於是圖片邊框，於是我把邊框的上下部分單獨切圖，中間重複部分平鋪

想要的效果圖：

一開始的寫法：
html:

<div class="paradise-wrap">
     <div class="paradise"></div>
</div>

css:

.paradise-wrap{
            position: relative;
            width: 640px;
            background: url("images/paradise/paradise-middle.png"
 
) repeat-y top;
            background-size: 640px 24px;
            padding: 0 40px;
            box-sizing: border-box;
            height: 800px;
            overflow: scroll;
        }
        .paradise-wrap:before{
            position: absolute;
            content: '';
            width: 640px;
            height
 
: 40px;
            background: url("images/paradise/paradise-top.png") no-repeat center;
            left: 0;
            top: -40px;
        }
        .paradise-wrap:after{
            position: absolute;
            content: '';
            width: 640px;
            height: 40px;
            background: url("images/paradise/paradise-bottom.png"
 
) no-repeat center;
            left: 0;
            bottom: -40px;
        }
        .paradise{
            width: 532px;
            height: 1238px;
            background: url("images/paradise/paradise-pics.png") no-repeat center;
            background-size: 532px 1238px;
            margin: 0 auto;
        }

實際效果圖：

上面的邊框一開始就被隱藏了，而滾動裡面的內容，發現下邊框會隨著內容一起滾動

原因是，paradise-wrap的div設定了position:relative,此時before、after偽元素定位參照物件為paradise-wrap，而其overflow屬性不為visible時，會對超出尺寸進行裁剪（於是作為子元素的before部分就被裁剪了），即使before、after是絕對定位，但是也是相對於父級絕對定位，所以父級一滾動，絕對定位的after部分也會隨之滾動

筆者一開始以為是after、before偽元素的原因，其實偽元素寫法跟正常的div寫法一樣，都是作為paradise-wrap的子元素，只不過偽元素不在正常的DOM樹中，把上下邊框用絕對定位的div實現也同樣會出現這種問題

解決方法：
在需要滾動的區域外層，再套一層div，將原來寫在paradise-wrap上的height、overflow: scroll屬性加在這個div上

html:

<div class="paradise-wrap">
        <div class="paradise-content">
            <div class="paradise">
            </div>
        </div>
    </div>

css:

.paradise-wrap{
            position: relative;
            width: 640px;
            background: url("images/paradise/paradise-middle.png") repeat-y top;
            background-size: 640px 24px;
            padding: 0 40px;
            box-sizing: border-box;
        }
.paradise-content{
            height: 800px;
            overflow: scroll;
        }

這樣的話，不會影響外面的邊框顯示，邊框固定，而裡面的內容也能正常滾動，可是實現一開始希望達到的效果