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最新学习资料一套，快速入门，福利难得哦！