由于现在主要接触移动端，不需要考虑IE等古董浏览器的兼容性问题，所以能最大程度的使用CSS3所带来的便捷。
在近期的一个项目中，根据设计需求，需要把图片以倾斜5度的方式来呈现出效果。于是便做了一个例子：-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举，可遇到了问题。在Fireofx中显示正常，但在webkit内核下的浏览器中，如Chrome和Safari，图片边缘会有很明显锯齿。也可以说是webkit抗锯齿的一个BUG。另外需要补充的一点，如果图片上级元素含有overflow:hidden;属性，则会让锯齿感更明显。
通过查找相关的资料，终于找到了解决办法。便是使用CSS3 3D transforms，通过GPU来渲染，能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ(0)。例：-webkit-transform: rotate(5deg) translateZ(0);
不过使用ipad下的safari打开网页，仍会有锯齿。
苹果 手机 默认 样式
苹果浏览器总会自作聪明自动添加自己的样式造成界面的不兼容，所以要清除初始化苹果默认样式。
一般苹果移动产品例如手机或者平板都会在input标签上添加自己的样式，我们要清除。代码如下：
input[type="button"], input[type="submit"], input[type="reset"]{-webkit-appearance:none;}
textarea{-webkit-appearance:none;}
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
还有苹果手机也会自作聪明的识别数字为手机号码为其添加拨号功能也是令人讨厌的地方
效果是鼠标移动到此div下就自己加载自己div下的load事件
<div ng-controller="f1"> <div load date="rundate()">加载数据...</load> </div> <div ng-controller="f2"> <div load date="rundate2()">加载数据...</load> </div>
<script>
var myapp=angular.module('myapp',[]);
myapp.controller('f1',function($scope){
$scope.rundate=function(){
console.log('数据1');
}
});
myapp.controller('f2',function($scope){
$scope.rundate2=function(){
console.log('数据2');
}
});
myapp.directive('load',function(){
return{
restrict:'A',
link:function(scope,element,attrs){
element.bind('mouseenter',function(){
scope.$apply(attrs.date);
})
}
}
});
</script>
效果就是在input中输入地址，在点击链接的时候就会跳转
<body ng-app="myapp">
<input type="text" ng-model="url">
<div fuck-you my-url="url" text-con="点这里"></fuck-you>
</body>
</html>
<script>
angular.module('myapp',[]).directive('fuckYou',function(){
return{
restrict:'A',
replace:true,
scope:{scopeUrl:'=myUrl',textCon:'@'},
template:'<a href="http://'+'{{scopeUrl}}">'+'{{textCon}}</a>'
}
});
</script>