细数web前端学习中的一些黑科技，第一个真没想到过

细数web前端学习中的一些黑科技，第一个真没想到过
分享科技方面的资讯，好玩有趣，让您的茶余饭后不再无聊，欢迎关注评论

我自己前端也已经工作六七年了，今天在和同事讨论一个问题长达两个小时，结果还是我输了，原因就是在于简单的问题我想的太过于复杂，发现是一些自己之前不注意，或者看了一次就再也没用过的东西，今天正好就一起整理分享一下。

首先还是要推荐我的QQ群：809538787，都是我每篇文章来的粉丝和一起学习的小伙伴，都是前端党，自己人就来吧，学前端一起学更快。
1.实时编辑 CSS
在 HTML 5 中新增了一个新的全局属性，contenteditable 属性。

contenteditable 属性规定是否可编辑元素的内容。

我们可以通过设置这个属性，来对之前的一些文本进行编辑。

就像这样。

该属性的取值：

值
描述
true规定可以编辑元素内容。
false规定无法编辑元素内容。
classname继承父元素的 contenteditable 属性。
样例代码：

那这个属性值和我们今天要说的内容有什么关系呢？

我们可以利用当前内容可编辑的这个特性，来去实现一个小的效果，例如这样。

当然，要测试出来效果，你自己还是需要会一些 CSS 的，尴尬脸。

2.大白 (●—●)
这个东西也是经常被拿来玩的一个小东西，就是通过 border-radius 去自己切一个图形。

正好在网上看到大白的这个源码，就一起分享给大家啦。

3.多重边框
如果大家需要制作这么一个效果，按照一般的写法，我们一般是使用多重 div 相互嵌套，之后分别针对每个 div 实现效果。

样例代码

但是，实际上大家可能忘记了一个小的东西，叫做 box-shadow。

这个属性是专门用于制作阴影的一个属性，可是我们平常已知的 box-shadow 不都是设置一个阴影么？

那么多重阴影该怎么设置呢？

实际上我们的 box-shadow 其实是可以设置多层的，只需要在模糊半径设置后面再追加一个阴影的距离就 OK 啦。

学习交流群：809538787 新手进群群文件里有很多资料，都是我自己收集的。希望能够对你们有所帮助哦
配图来源网络，如有侵权联系删除。