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