前端奇怪的知识

1、解决移动端1px像素问题

1.1、border-image（不建议使用）

.box {
    border-width: 1px 0px;
    -webkit-border-image: url(border.png) 2 0 stretch;
    border-image: url(border.png) 2 0 stretch;
}
优点：图片可以用gif, png, base64多种格式, 以上是上下左右四条边框的写法, 
需要单一边框只要定义单一边框的border, 代码比较直观.
缺点：大小、颜色更改不灵活，放到PS里面看边框，是有点模糊的
(因为带有颜色部分是1px，在retina屏幕上拉伸到2px肯定会有点模糊)

1.2、background-img渐变

.box {
   background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;
}

1.3 、CSS3 box-shadow（不建议）

.shadow {
    -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
	box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
}

1.4 、:before:after和transform（最优）

设置height: 1px，根据媒体查询结合transform缩放为相应尺寸。

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求

div::after{
    content:'';width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}

用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

2、前端加密

2.1 base64加密

     //加密
      var b = new Base64();  
      var str = b.encode("admin:admin");  
      //解密
      str = b.decode(str);  

2.2 md5加密

var hash = hex_md5("123dafd");

2.3 sha1加密

var sha = hex_sha1('mima123465')   引入js文件