CSS写了圆角、阴影，在旧版浏览器上全变直角，加完前缀兼容性直接拉满

刚学写前端样式那会，我给按钮加圆角、阴影、渐变，在自己Chrome上看效果特别好，结果有个用户用旧版IE打开，说我网站的按钮全是直角，阴影和渐变全没了，页面丑得没法看。我当时才知道，很多CSS3新属性，在旧浏览器上要加浏览器前缀才能生效，我啥前缀都没加，用户那边自然就显示不出来。 后来我写完CSS，给所有新属性把前缀补全，比如圆角要加-webkit-、-moz-前缀，阴影、渐变也是，改完之后再用旧版浏览器打开，样式就正常显示了。从那之后我写CSS，根本不手敲前缀，直接用自动工具，写完CSS一键加所有浏览器前缀，不用自己挨个补，省了好多事。 很多新手写前端，只在自己电脑的新浏览器上看效果，根本不管旧版本用户的兼容性，结果一部分用户打开网站样式全乱，白白流失。其实现在大部分兼容性问题，写完CSS自动加前缀、用autoprefixer工具处理一遍，就能覆盖99%的浏览器，根本不用自己手敲。我当时就是因为没加前缀，被老用户吐槽页面丑，才养成了自动补前缀的习惯。 真的，写前端别只在自己常用的浏览器上测，写完用工具跑一遍兼容性，补全前缀，不然总会有一部分用户打开你网站样式错乱，用户看着不专业，转身就走。