前端的一些小技巧汇总

多重边框.

利用重复指定box-shadow来达到多个边框的效果

div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

简单的文本模糊

p {
    color: transparent;
    text-shadow: #111 0 0 5px;
}

编辑任意页面

打开浏览器控制台,输入如下代码并执行.就可以对页面进行编辑了.

document.body.contentEditable='true';

浏览器做编辑器用

在浏览器地址栏输入如下代码,然后回车.

data:text/html, 

同理,你可以在地址栏运行html

data:text/html,
Hello, world!

同样可以运行javascript

javascript:alert('hello from address bar :)');