2021-03-30

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
}