僞元素變動尺寸透明背景圖框
表格背景圖為由Photoshop設計並切割成上、中、下，在左右切割成左中右共九張圖，中間部位請設計為單色內容，四邊請設計為可重複延伸內容，並注意每個切片圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。
四邊與四角共八個背景的設定，需安排三個<div>搭配before、after設定出四邊四角圖框，第四層<div>安排中間背景。
首先第一層<div>設定類別【.full-width】，以安排右上角圖，背景圖不重複、靠右、靠上，並在<div>加上【class=" full -width"】完成套用。
繼續加上【::before】設定右側邊框圖，上下需空出上下邊框圖的高度，背景圖為中間圖框需直向重複repeat-y、背景圖靠右。加上【::after】設定下側邊框圖，需設定準確高度(同下邊圖高)，座標位置為靠下，且須利用座標值空出左下角與右下角圖寬。
第二層 DIV以安排右下角圖、上邊圖框、左邊圖框，設定類別【.inner】安排右下角圖，設定z-index:2以確保覆蓋住上一層DIV，背景圖位置為靠右靠下，並在<div>加上【class=" inner"】完成套用。
【::before】設定上邊圖框，利用座標位置設定空出左上角與右上角圖寬、準確上邊圖高，水平重複出上邊框。
【::after】設定左邊圖框，利用座標位置設定空出左上角與左下角圖高；垂直重複出左邊圖框。
第三層 DIV以安排左上角圖、左下角圖，設定類別【.inner2】安排左上角圖，設定z-index:3以確保覆蓋住上一層DIV，並在<div>加上【class=" inner2"】完成套用。
【::before】設定左下角圖，座標位置為左、上，與準確左下角圖寬、圖高。
第四層 DIV以安排中間背景色，設定類別【.inner3】利用四邊padding均同四邊圖寬、圖高，以及以【background-clip: content-box;】達成只顯示Padding之內的背景色目的，並在<div>加上【class=" inner3"】完成套用，加上段落文字控制即完成。
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
這是偉特塔羅卡牌誕生背後的故事，畫師帕梅拉受到委託繪製，但最終與委託者偉特的意見分歧，影響了牌義與圖像的對應。這對於想要深入瞭解塔羅的朋友來說，可以透過學習埃及和希臘神話直接套入這套牌裡，或者背誦書中的牌義。
當代生活中，偽意義對人們產生了深遠的影響。在尋求最佳商品時，人們常常需要面對兩派聲音的幹擾，這也反映出現代設計中對美感和功能性的平衡。此外，政治運作中的黑箱操作和表面上的民主也令人疑惑，使人難以擺脫偽意義的迷惘。在網絡媒體的影響下，人們追逐潮流，很難擺脫現代社會的牽制。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
（有雷，建議看過電影再進入閱讀）
去年年底看了《元素方城市》，想起之前聊天時朋友說過她覺得不值得到電影院看這部。
這部電影哪裡「不好看」？哪裡「好看」？
如果從偉特塔羅牌惡魔牌的角度來看，可能有什麼樣的理解？
牌面上的構圖我們可以看到一男一女雙手各持著一個聖杯，右手邊的男性準備伸手去接左邊女性手上的聖杯，象徵著情感上的交流，與情緒的互動。
我們可以看到男性雖然帶有好奇，但是尊重女性，慢慢地觸碰。女性雖然是較為被動，但是她雙手持聖杯的姿態，可以隱約看出她內在中已經準備好要將自己交託出去。
《正直不動產》第一集從登坂不動産的超級營業員永瀨財地因為誤破壞了基地現場封印瘟神的小廟，受到詛咒，再也無法說謊而引發了後續一連串的事件開始說起；永瀨說對石田先生說：「多年來您工作辛苦了！接下來就由土地為您工作吧！」真的如永瀨說得那麼好嗎？年輕的柿澤小姐第一次租屋，能找到好的房子嗎？
三個星幣的排列中央有一個十字的圓形圖樣，這個圖樣在聖杯一的牌面上也出現過，這個圖樣象徵著「上帝聖體」，也可以說是「神的贈禮」，或者相對簡單的描述：「靈感」。
因此這張牌顯示了一個靈感透過專業設計、管理、創作技術的相互合作，進而變成具體的形象，顯化於世間的過程。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
做法非常非常的簡單是個懶人料理來著，但出來的成品非常的好吃！吃完會有滿滿的幸福感和卡路里上升的罪惡感。
以下為簡單做法來著ヽ(✿ﾟ▽ﾟ)ノ
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
這是偉特塔羅卡牌誕生背後的故事，畫師帕梅拉受到委託繪製，但最終與委託者偉特的意見分歧，影響了牌義與圖像的對應。這對於想要深入瞭解塔羅的朋友來說，可以透過學習埃及和希臘神話直接套入這套牌裡，或者背誦書中的牌義。
當代生活中，偽意義對人們產生了深遠的影響。在尋求最佳商品時，人們常常需要面對兩派聲音的幹擾，這也反映出現代設計中對美感和功能性的平衡。此外，政治運作中的黑箱操作和表面上的民主也令人疑惑，使人難以擺脫偽意義的迷惘。在網絡媒體的影響下，人們追逐潮流，很難擺脫現代社會的牽制。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
（有雷，建議看過電影再進入閱讀）
去年年底看了《元素方城市》，想起之前聊天時朋友說過她覺得不值得到電影院看這部。
這部電影哪裡「不好看」？哪裡「好看」？
如果從偉特塔羅牌惡魔牌的角度來看，可能有什麼樣的理解？
牌面上的構圖我們可以看到一男一女雙手各持著一個聖杯，右手邊的男性準備伸手去接左邊女性手上的聖杯，象徵著情感上的交流，與情緒的互動。
我們可以看到男性雖然帶有好奇，但是尊重女性，慢慢地觸碰。女性雖然是較為被動，但是她雙手持聖杯的姿態，可以隱約看出她內在中已經準備好要將自己交託出去。
《正直不動產》第一集從登坂不動産的超級營業員永瀨財地因為誤破壞了基地現場封印瘟神的小廟，受到詛咒，再也無法說謊而引發了後續一連串的事件開始說起；永瀨說對石田先生說：「多年來您工作辛苦了！接下來就由土地為您工作吧！」真的如永瀨說得那麼好嗎？年輕的柿澤小姐第一次租屋，能找到好的房子嗎？
三個星幣的排列中央有一個十字的圓形圖樣，這個圖樣在聖杯一的牌面上也出現過，這個圖樣象徵著「上帝聖體」，也可以說是「神的贈禮」，或者相對簡單的描述：「靈感」。
因此這張牌顯示了一個靈感透過專業設計、管理、創作技術的相互合作，進而變成具體的形象，顯化於世間的過程。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
做法非常非常的簡單是個懶人料理來著，但出來的成品非常的好吃！吃完會有滿滿的幸福感和卡路里上升的罪惡感。
以下為簡單做法來著ヽ(✿ﾟ▽ﾟ)ノ