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

时间:2022-01-09 17:12:23

      在使用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上按钮的圆角问题。