实现过程
首先了解一下默认的样式有哪些,然后根据自己的UI来实现:
button {position:relative;display:block;margin-left:auto;margin-right:auto;padding-left:14px;padding-right:14px;box-sizing:border-box;font-size:18px;text-align:center;text-decoration:none;line-height:2.55555556;border-radius:5px;-webkit-tap-highlight-color:transparent;overflow:hidden;color:#000000;background-color:#F8F8F8;}
1、使用::after
伪类选择器,因为button的边框样式是通过::after
方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after
的方式去覆盖默认值。
button::after { border: none; }
2.其他样式直接修改,例如:
button { background-color: #fff; }
---------------------------------------------------------