細數web前端學習中的一些黑科技,第一個真沒想到過
阿新 • • 發佈:2019-01-05
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最新學習資料一套,快速入門,福利難得哦!