解决苹果手机按钮的圆角问题

      在使用htnl5编写移动页面时，总会涉及有关按钮的一些问题，在android手机浏览器中显示正常，但在ios浏览器中按钮会显示为圆角，设置border-radius:0px;也不管用，其实在css中添加  “-webkit-appearance”就能解决问题。

问题截图：

     

css：

    .btn{
          height: 300px;
          width: 300px;
          line-height: 300px;
          border: 0;
          font-size: 55px;
          color: #fff;
          background: #EA15A0;
          border-radius: 50px;
          -webkit-appearance : none ;  /*解决iphone safari上的圆角问题*/
         }

html：

    <input type ="button" class ="btn" value="按钮" />

  

总结：

     使用css样式 -webkit-appearance: none;  轻松解决iphone上按钮的圆角问题。