js小技巧总结
js生成随机字符串的函数,主要利用了toString() 方法的特性
function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
两个变量交换方法
let a=1, b=2
a=[b, b=a][0]
浮点数快速向下取整
(12.4 / 4.13) | 0
// => 3
~~(12.4 / 4.13)
// => 3
css小技巧
文字模糊效果
color: transparent;
text-shadow: #111 0 0 5px;
毛玻璃效果
只是用到了 css 滤镜(filter)中的 blur 属性。但是要做一个好的毛玻璃效果,需要注意很多细节
.blur {
display: block;
width: 300px;
height: 300px;
margin: 100px auto;
filter: blur(10px);
}
<img src="./img/test.png" class="blur" alt="">
多重边框
我们可以利用重复指定box-shadow来达到多个边框的效果。
/*CSS Border with Box-Shadow Example*/
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
}