表格背景圖為由Photoshop設計並切割成上、中、下三張圖，左邊與右邊框需設計為可直向重複延伸，請注意圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。

首先設定類別【.fixed-width】，以安排上邊圖，設定設定背景圖為上邊圖、不重複，注意左右padding值(80)+寬值(220)須等於圖寬

藝文

創作

職場產業

<div class="draft-block draft--p left">表格背景圖為由Photoshop設計並切割成上、中、下三張圖，左邊與右邊框需設計為可直向重複延伸，請注意圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:977px" class="image-block-prerender" data-src="https://images.vocus.cc/5405113f-9584-429d-b842-d4323810acaa.jpg" data-width="977" data-height="403" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">首先設定類別【.fixed-width】，以安排上邊圖，設定設定背景圖為上邊圖、不重複，注意左右padding值(80)+寬值(220)須等於圖寬(300)，並在&lt;div&gt;加上【class="fixed-width"】完成套用。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:967px" class="image-block-prerender" data-src="https://images.vocus.cc/0681a5af-20b0-4fdf-b39e-9786cc021876.jpg" data-width="967" data-height="484" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">繼續加上【::before】設定中間左右側邊框圖，上下需空出上下邊框圖的高度( 使用座標定位出空間範圍)，背景圖為中間圖框需直向重複repeat-y；</div>
<div class="draft-block draft--p left"></div>
<div class="draft--imgNormal draft-block"><div><div style="height:996px" class="image-block-prerender" data-src="https://images.vocus.cc/4ff54416-caf9-4efc-a5d3-70f2778cbf9b.jpg" data-width="996" data-height="295" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">最後加上【::after】設定下側邊框圖，需設定準確高度(同下邊圖高)，座標位置為靠下。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1000px" class="image-block-prerender" data-src="https://images.vocus.cc/46eb8da6-1aa6-4076-8ea1-b79cc7e16367.jpg" data-width="1000" data-height="326" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">【<a href="https://d32mcm3hkdm8smd1hmeyyq-on.drv.tw/CSS/css11/css11-ok.html" target="_blank" class="draft--a">檢視範例</a>】【<a href="https://drive.google.com/open?id=1BeTYV8AC-dRNiq-ccwpd3WMQ1HoENlkv" target="_blank" class="draft--a">下載範例</a>】</div>
<div class="draft-block draft--p left">相關課程 : <a href="https://www.uuu.com.tw/Course/Show/687/%E7%B2%BE%E4%BF%AEDIV-CSS%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E8%A8%AD%E8%A8%88%E8%BC%95%E9%AC%86%E5%81%9A" target="_blank" class="draft--a">精修DIV+CSS網頁排版設計輕鬆做</a></div>

<p>表格背景圖為由Photoshop設計並切割成上、中、下三張圖，左邊與右邊框需設計為可直向重複延伸，請注意圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。</p>
<p><br></p>
<p>首先設定類別【.fixed-width】，以安排上邊圖，設定設定背景圖為上邊圖、不重複，注意左右padding值(80)+寬值(220)須等於圖寬(300)，並在&lt;div&gt;加上【class="fixed-width"】完成套用。</p>
<p><br></p>
<p>繼續加上【::before】設定中間左右側邊框圖，上下需空出上下邊框圖的高度( 使用座標定位出空間範圍)，背景圖為中間圖框需直向重複repeat-y；</p>
<p><br></p>
<p><br></p>
<p>最後加上【::after】設定下側邊框圖，需設定準確高度(同下邊圖高)，座標位置為靠下。</p>
<p><br></p>
<p>【<a href="https://d32mcm3hkdm8smd1hmeyyq-on.drv.tw/CSS/css11/css11-ok.html">檢視範例</a>】【<a href="https://drive.google.com/open?id=1BeTYV8AC-dRNiq-ccwpd3WMQ1HoENlkv">下載範例</a>】</p>
<p>相關課程 : <a href="https://www.uuu.com.tw/Course/Show/687/%E7%B2%BE%E4%BF%AEDIV-CSS%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E8%A8%AD%E8%A8%88%E8%BC%95%E9%AC%86%E5%81%9A">精修DIV+CSS網頁排版設計輕鬆做</a></p>

表格背景圖為由Photoshop設計並切割成上、中、下三張圖，左邊與右邊框需設計為可直向重複延伸，請注意圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。

首先設定類別【.fixed-width】，以安排上邊圖，設定設定背景圖為上邊圖、不重複，注意左右padding值(80)+寬值(220)須等於圖寬(300)，並在<div>加上【class="fixed-width"】完成套用。

繼續加上【::before】設定中間左右側邊框圖，上下需空出上下邊框圖的高度( 使用座標定位出空間範圍)，背景圖為中間圖框需直向重複repeat-y；

最後加上【::after】設定下側邊框圖，需設定準確高度(同下邊圖高)，座標位置為靠下。

相關課程 : 精修DIV+CSS網頁排版設計輕鬆做

僞元素固定尺寸透明背景圖框

表格背景圖為由Photoshop設計並切割成上、中、下，在左右切割成左中右共九張圖，中間部位請設計為單色內容，四邊請設計為可重複延伸內容，並注意每個切片圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。

四邊與四角共八個背景的設定，需安排三個搭配before、after設定出四邊四角圖框，第四層安排中

僞元素變動尺寸透明背景圖框

當跟 CSS 選取器匹配的元素底下的內容要做些特殊處理時，就可以利用偽元素來幫我們做到一些效果，如邊框與背景圖。其中【::before】 在元素之前插入某些內容與【::after】在元素之後插入某些內容，在進階 CSS 效果中算是很特別的，而且製作 RWD 頁面上效果時也常可以用到。
首先新增類別【