实例 向 div 元素添加圆角边框： div { border:2px solidborder-radius:25px} 亲自试一试 页面底部有更多实例。 浏览器支持 IE Firefox Chrome Safari Opera IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。 定...
在Fireofx中显示正常，但在webkit内核下的浏览器中，如Chrome和Safari，图片边缘会有很明显锯齿。也可以说是webkit抗锯齿的一个BUG。另外需要补充的一点，如果图片上级元素含有overflow:hidden属性，则会让锯齿感更明显。通过查找相关的资料，终于找到了解决办法。便是使用CSS3 3D transforms，通过GPU来渲染，能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ(0 同时发现另一个小问题，缩放的图片使用rotate3d 在非retina 屏下图片会变模糊了点点（属于不对比不发现的），而用rotate就没这问题，这个问题在old iPad 发现。同时又发现另另一个小问题，iOS 4.x上的 想要平滑，缩放图片哪种都会变模糊了点点（同样属于不对比不发现的），这个问题在old old iPhone 发现的。当一个div在另一个div里，两个div都有margin的属性，想让这两个div不出现外边距合并的问题，必须给外层div添加border属性或者overflow:hidden属性；如果允许其出现外边距合并，内层div始终保持原位置，而外层div的margin属性会取两者的最大值。例： 1.不允许出现外边距合并，给外层div添加overflow:hidden或border属性：外层盒子margin-top为100px,内层盒子为50px。
2.允许出现外边距合并：内层div始终保持原位置不变，外层div的margin去两者中最大值：
二、当两个div不存在嵌套关系时，不管是否有border或者overflow属性时，两者始终会存在外边距合并问题。
例：1.第一个div有margin-bottom:100px，第二个为margin-top:50px, 两者间距最终取100px
2.第一个div 由margin-bottom:100px, 第二个为margin-top:150px,两者间距最终取150px
总结：在实际项目中，如果对外边距合并理解不透彻而又不想因为css盒模型的外边距合并问题困扰，可以在不影响布局的问题下，可以添加overflow:hidden属性或者跟透明的border；如无法避免外边距合并问题，谨记两者margin取最大值就好了。
锯齿的出现未必就和技术有关。有些时候显示器的分辨率，你使用的浏览器，你的WINDOWS版本和你的显卡都对网页的表现都有一定影响，任何计算机视觉的表现力都是建立在硬件和软件基础上的，这几种字体的显示可能和软硬件有关。建议你换个浏览器或者干脆换台计算机测试一下你的网页，又或者把同样的代码摘出来在记事本上测试一下结果，看看是否是受到软硬件的影响。提示一下，针对四种常见的非IE内核的浏览器的测试对专业的设计师来说是很必要的，而使用IE的话，尽可能使用IE6.0以上版本。 还有问题的话，检查你定义这几串字符串的块，看看填充和边界是不是在数据上有冲突，有没有使用浮动，甚至可以另开记事本手写这部分代码，不要用自动生成的，甚至不要用CSS，直接给标签赋值，看看这几种字体会不会有影响。 还，还有问题的话，检查一下你的浏览器对编码的支持。 一般来说，一个问题的发现要伴着若干种解决的方案，我们在操作的过程中可以得到很好的成长。虽然有时候发现一个问题要化掉很长时间才解决的了，但是自己动手的话可以慢慢的建立一种后天的条件反射，就是对问题的提前发现和最优解决方案的第一反应，痛苦的经历伴随着潜意识上的深刻体验，换来的条件反射绝对是一种不可替代的财富。我想这是慢慢成为一个专家甚至大师的必经之路吧。
