僞元素固定尺寸透明背景圖框
表格背景圖為由Photoshop設計並切割成上、中、下三張圖，左邊與右邊框需設計為可直向重複延伸，請注意圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。
首先設定類別【.fixed-width】，以安排上邊圖，設定設定背景圖為上邊圖、不重複，注意左右padding值(80)+寬值(220)須等於圖寬(300)，並在div加上【class="fixed-width"】完成套用。
繼續加上【::before】設定中間左右側邊框圖，上下需空出上下邊框圖的高度( 使用座標定位出空間範圍)，背景圖為中間圖框需直向重複repeat-y；
最後加上【::after】設定下側邊框圖，需設定準確高度(同下邊圖高)，座標位置為靠下。
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
分享至
成為作者繼續創作的動力吧！
Dreamweaver CC除了提供方便的程式碼編輯畫面外，原本就是一個協助網頁初學者開始認識HTML碼的好工具，包括CSS設定與Bootstrap組件，更是響應式網頁初學者的好幫手，加上與PHP資料庫的輕易結合，絕對是學習完整網頁結構的最佳利器!
