【噗浪CSS】
怎麼讓特定人在你河道上得到尊爵不凡特殊顯示待遇v2.0 （v1.0）
簡單Demo1：
簡單Demo2（gif注意）：
也可以只在角落加可愛小生物（圖源：噗浪中秋賀圖）
簡單Demo3（gif注意）：

啊...啊...

寫在前面：
1. 可能不適合完全新手
2. 靈感來源為噗浪官方活動PrayForKyoani的角落小標誌
3. 簡單來說就是利用Pseudo Element來塞圖片
4. 直男教學

STEP 1: 先找到目標user的id（簡單複製之前的貼上，看不懂的請看1.0那噗）
1. 開網頁檢測器（通常快捷是F12）
2. 找到目標user的噗後，觀察他在檢測器中的uid並記錄下來

STEP 2:複製以下CSS並根據自身需要修改（以第二個gif的肉骨獸為例）
（噗浪貼code格式會跑掉，排版潔癖可以直接開最後面的code連結）

.plurk[data-uid=<uid>]::after {
content: '';
background: url(<image-url>) no-repeat;
background-size: contain;
position: absolute;
width: <width>;
height: <height>;
left: <position>;
bottom: <position>;
}

請把<uid>改成剛剛找到的user-id
<image-url>改成你想要用的圖片網址
<width>/<height>改為顯示在網站上的圖片大小
<left>/<botton>改為你想顯示、相對於該噗的位置
範例（肉骨獸版）：

到這邊，基本上就已經完成了，不過可以發現打開噗後肉骨獸位置可能會跑掉、或者你覺得開噗後圖片太小，可以根據該噗不同狀態而顯示不同大小

SETP 3: 設定該噗不同狀態時圖片的位置、大小
滑鼠移上去、展開全噗內容，但沒有點開回應的噗，選擇法是：.plurk.display[data-uid=<uid>]
點開回應的噗的選擇法是：.plurk.display.plurk_box[data-uid=<uid>]
以上看不懂的話可以直接觀察並修改以下模板

// 滑鼠移上去但沒點開
.plurk.display[data-uid=<uid>]::after {
width: <width>;
height: <height>;
left: <position>;
bottom: <position>;
}

// 點開回應後
.plurk.display.plurk_box[data-uid=<uid>]::after {
width: <width>;
height: <height>;
left: <position>;
bottom: <position>;
}

一樣請把角括號內的內容改成自定義內容
範例：
基本上完全照打的話，就可以得到噗首肉骨獸gif的效果
（code會放在本噗最後，可以直接複製貼上）

STEP 3: 擴展成角落邊框（以第一個gif的花邊框為例）
兩個辦法：一個是直接把該圖片做成一個噗的大小，利用跟肉骨獸相同方法蓋上去，優點是簡單，缺點是彈性比較不高，且容易變形
第二個是利用另一個pseudo element來製作另一個邊框，優點是變化彈性高，缺點是較為複雜

首先先把上面STEP 2的模板修改成你想要的左下角邊框
接著觀察並修改以下模板，改成右上角邊框

.plurk[data-uid=<uid>]::before{
content: '';
background: url(<image-url>) no-repeat;
background-size: contain;
transform: rotate(180deg);
position: absolute;
width: <width>;
height: <height>;
left: <position>;
bottom: <position>;
z-index: 100; }

請把<uid>改成剛剛找到的user-id
<image-url>改成你想要用的圖片網址
<width>/<height>改為顯示在網站上的圖片大小
<position>改為你想顯示、相對於該噗的位置

呃……對，其實跟左下角邊框幾乎一樣，只是把after改成before，並增加兩行新內容

當然，一樣可以根據該噗不同狀態設置不同的大小、位置
範例（最後會附code）：
左邊框：
右邊框：
圖片來源，十分感謝

基本上就可以得到噗首第一個gif的花邊框效果

STEP 4: 如果只希望沒點開前有邊框
其實只需要該噗跳到其他狀態時把之前的內容清掉

.plurk.display[data-uid=<uid>]::after {
background: none;
position: absolute;
width: 0;
height: 0;
left: 0;
bottom: 0;
}

============
先到這邊，突然需要離開一下，晚上貼code跟補充一些其他好玩的用法

好玩的：如果只希望有未讀的噗有邊框
.plurk.new[data-uid=<uid>]::after 跟
.plurk.new[data-uid=<uid>]::before

好玩的：如果希望都有邊框、但消音的沒有
邊框設定同Step2~3，Step 4的清除條件改成：
.plurk.muted[data-uid=<uid>]::after 跟
.plurk.muted[data-uid=<uid>]::before

基本上就這樣～以上所有的範例可以參考這個噗浪貼