僞元素容器多背景
利用::before以及::after做出重疊多個背景，甚至多個邊框的效果。
由css3 【content】生成內容，content一般和::before,::after一起使用，用來生成內容，content的內容一般可以為以下四種：
none： 不生成任何值；
attr： 插入標籤屬性值；
url： 使用指定的絕對或相對地址插入一個外部資源（圖像，視頻或瀏覽器支持的其他任何資源）；
string： 插入字符串。
STEP1.
頁面中包含三組DIV內容區塊，id名稱依序為sprite、outside、corner。
首先來美化sprite，使用的圖片為三朵一起的花，單朵花尺寸寬:75px高:128px。
為變動寬width:50%;min-width:300px;max-width:900px;背景圖background-position: -150px 0;向左移動出左側二朵花(單朵花尺寸寬:75px高:128px)讓黃花顯示。
再利用::before安排右上角藍花，::after安排右下角紅花。
STEP2.
Outside區塊使用the box圖，尺寸為寬195、高230。
首先設定整個外框、h2標題與標題區底色(#outside .hero)。
再以#outside .hero::before設定背景圖，可更改#outside .hero::before的右側邊界負值與座標值控制圖位置。
STEP3.
corner區塊使用使用三張插圖並利用::before製作折角效果。#corner先設定背景色、寬度與左側中間鉛筆背景圖。
#corner::before設定右上角折角造型，更改border-width: 20px;及可改變折角尺寸。
#corner::after設定右下角二個背景圖裝飾。
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
分享至
成為作者繼續創作的動力吧！
Dreamweaver CC除了提供方便的程式碼編輯畫面外，原本就是一個協助網頁初學者開始認識HTML碼的好工具，包括CSS設定與Bootstrap組件，更是響應式網頁初學者的好幫手，加上與PHP資料庫的輕易結合，絕對是學習完整網頁結構的最佳利器!
