1.實時編輯 CSS
在 HTML 5 中新增了一個新的全域性屬性，contenteditable 屬性。

contenteditable 屬性規定是否可編輯元素的內容。

我們可以通過設定這個屬性，來對之前的一些文字進行編輯。

就像這樣。

該屬性的取值：

值
描述
true規定可以編輯元素內容。
false規定無法編輯元素內容。
classname繼承父元素的 contenteditable 屬性。
樣例程式碼：

那這個屬性值和我們今天要說的內容有什麼關係呢？

我們可以利用當前內容可編輯的這個特性，來去實現一個小的效果，例如這樣。

當然，要測試出來效果，你自己還是需要會一些 CSS 的，尷尬臉。

2.大白 (●—●)
這個東西也是經常被拿來玩的一個小東西，就是通過 border-radius 去自己切一個圖形。

正好在網上看到大白的這個原始碼，就一起分享給大家啦。







3.多重邊框

如果大家需要製作這麼一個效果，按照一般的寫法，我們一般是使用多重 div 相互巢狀，之後分別針對每個 div 實現效果。

樣例程式碼

但是，實際上大家可能忘記了一個小的東西，叫做 box-shadow。

這個屬性是專門用於製作陰影的一個屬性，可是我們平常已知的 box-shadow 不都是設定一個陰影麼？

那麼多重陰影該怎麼設定呢？

實際上我們的 box-shadow 其實是可以設定多層的，只需要在模糊半徑設定後面再追加一個陰影的距離就 OK 啦

歡迎加入web前端學習群，群聊號碼：957389100，進群可免費領取2019最新學習資料一套，快速入門，福利難得哦！