僞元素容器多背景
閱讀時間約 2 分鐘
利用::before以及::after做出重疊多個背景，甚至多個邊框的效果。
由css3 【content】生成內容，content一般和::before,::after一起使用，用來生成內容，content的內容一般可以為以下四種：
none： 不生成任何值；
attr： 插入標籤屬性值；
url： 使用指定的絕對或相對地址插入一個外部資源（圖像，視頻或瀏覽器支持的其他任何資源）；
string： 插入字符串。
STEP1.
頁面中包含三組<DIV>內容區塊，id名稱依序為sprite、outside、corner。
頁面中包含三組<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。
Outside區塊使用the box圖，尺寸為寬195、高230。
首先設定整個外框、h2標題與標題區底色(#outside .hero)。
再以#outside .hero::before設定背景圖，可更改#outside .hero::before的右側邊界負值與座標值控制圖位置。
STEP3.
corner區塊使用使用三張插圖並利用::before製作折角效果。#corner先設定背景色、寬度與左側中間鉛筆背景圖。
corner區塊使用使用三張插圖並利用::before製作折角效果。#corner先設定背景色、寬度與左側中間鉛筆背景圖。
#corner::before設定右上角折角造型，更改border-width: 20px;及可改變折角尺寸。
#corner::after設定右下角二個背景圖裝飾。
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
這是偉特塔羅卡牌誕生背後的故事，畫師帕梅拉受到委託繪製，但最終與委託者偉特的意見分歧，影響了牌義與圖像的對應。這對於想要深入瞭解塔羅的朋友來說，可以透過學習埃及和希臘神話直接套入這套牌裡，或者背誦書中的牌義。
當代生活中，偽意義對人們產生了深遠的影響。在尋求最佳商品時，人們常常需要面對兩派聲音的幹擾，這也反映出現代設計中對美感和功能性的平衡。此外，政治運作中的黑箱操作和表面上的民主也令人疑惑，使人難以擺脫偽意義的迷惘。在網絡媒體的影響下，人們追逐潮流，很難擺脫現代社會的牽制。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
（有雷，建議看過電影再進入閱讀）
去年年底看了《元素方城市》，想起之前聊天時朋友說過她覺得不值得到電影院看這部。
這部電影哪裡「不好看」？哪裡「好看」？
如果從偉特塔羅牌惡魔牌的角度來看，可能有什麼樣的理解？
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
因為人中之龍6的關係，在地圖上看到尾道這兩字，便興奮地安排了這次的尾道之旅，尾道其實不算冷門（跟三原比起來啦），背山面海，是瀨戶內海旁的小小漁村聚落，最有名的大概是湯底混雜肉臊滷汁的尾道拉麵
墨莉現在腦袋裡只有一件事。
──找到「她」，然後回宿舍那兒救學長。
陰天下午
在陽明山仰德大道上
我慢速的騎著小50下山
路邊緩緩走出一頭全身沒有半根雜毛的純黑山羊走到了馬路上
山羊有黃牛那麼大
我不禁慢了下來看得目瞪口呆
牠停在馬路上
後面又跟著一頭一模一樣的黑
她是一台在車站旁邊麥當勞裡面夾在垃圾桶與提款機角落的投籃機(注)
出生於1995年8月
理想遊樂機械工業有限公司
每天都有很多的學生來玩投籃
彼此競較著分數與男性氣概
揮發著青春年華的氣息與面對學測
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
這是偉特塔羅卡牌誕生背後的故事，畫師帕梅拉受到委託繪製，但最終與委託者偉特的意見分歧，影響了牌義與圖像的對應。這對於想要深入瞭解塔羅的朋友來說，可以透過學習埃及和希臘神話直接套入這套牌裡，或者背誦書中的牌義。
當代生活中，偽意義對人們產生了深遠的影響。在尋求最佳商品時，人們常常需要面對兩派聲音的幹擾，這也反映出現代設計中對美感和功能性的平衡。此外，政治運作中的黑箱操作和表面上的民主也令人疑惑，使人難以擺脫偽意義的迷惘。在網絡媒體的影響下，人們追逐潮流，很難擺脫現代社會的牽制。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
（有雷，建議看過電影再進入閱讀）
去年年底看了《元素方城市》，想起之前聊天時朋友說過她覺得不值得到電影院看這部。
這部電影哪裡「不好看」？哪裡「好看」？
如果從偉特塔羅牌惡魔牌的角度來看，可能有什麼樣的理解？
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
因為人中之龍6的關係，在地圖上看到尾道這兩字，便興奮地安排了這次的尾道之旅，尾道其實不算冷門（跟三原比起來啦），背山面海，是瀨戶內海旁的小小漁村聚落，最有名的大概是湯底混雜肉臊滷汁的尾道拉麵
墨莉現在腦袋裡只有一件事。
──找到「她」，然後回宿舍那兒救學長。
陰天下午
在陽明山仰德大道上
我慢速的騎著小50下山
路邊緩緩走出一頭全身沒有半根雜毛的純黑山羊走到了馬路上
山羊有黃牛那麼大
我不禁慢了下來看得目瞪口呆
牠停在馬路上
後面又跟著一頭一模一樣的黑
她是一台在車站旁邊麥當勞裡面夾在垃圾桶與提款機角落的投籃機(注)
出生於1995年8月
理想遊樂機械工業有限公司
每天都有很多的學生來玩投籃
彼此競較著分數與男性氣概
揮發著青春年華的氣息與面對學測