1.直接用transform
transform：scale(0.5,0.5);
border:1px solid #fff;
这种方法会将元素的设定的固定高度和宽度也缩为一半，margin也是
我们在浏览器中看到的是宽高是一半，但是他的实际宽高还是固定的值，
所以不推荐。
2.利用伪元素：before
<div class='button2' >Login</div>
.button2{
position: absolute; //只要不是static就行
width: 100px;
height: 50px;
color: #fff;
line-height: 50px;
text-align: center;
border-radius: 10px;
letter-spacing: 0.1em;
}
.button2:before{
content: '';
position: absolute; //必需
left: 0; //必需
width: 200%; //必需
height: 200%; //必需
border: 1px solid #fff; //必需
transform-origin: 0 0; //必需
transform: scale(0.5,0.5); //必需
box-sizing: border-box; //必需
border-radius: 20px;
}
这种方法也有缺陷，比如要为按钮设置圆角，在伪元素中设置的必须为元素的2倍，而且两者都需要设置。元素表现的宽和实际的宽是一致的。
