border-radius，css3的圆角属性。但是除此会是圆角，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。
把这些基本的图形进行组合，还可以描绘成不同的图案。以下只是简单的几个举例，更多的图形，自己动手画吧。仅border-radius就能实现这么丰富的图案，如果再加上边框大小、渐变颜色和阴影等，将会添加更多的质感。更多图形请参见：CSS3绘制各种图形效果
是不是动画效果越多越好？哪些效果需要付出高昂的性能代价？怎样才能做到兼顾网站的效果与效率呢？来看看浏览器的重排与重绘知识，了解如何在具体的开发过程中注意重绘和重排引发的性能问题
浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树(rendering tree)。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。
重排是更明显的一种改变，可以理解为渲染树需要重新计算。 查看全文
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？
webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。
来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版） 查看全文
首次翻译，整个译文带有我自己的理解，如果译得不好或不对之处还请同行朋友指点。
英文原文：《Creating Triangles in CSS》
demo地址：http://www.xuanfengge.com/demo/201308/Triangles/
我在我的职业生涯中遇到过一些技术和技巧，在最后一个演出上工作时，一个同事想我指出这种技术。我相信这个是由传奇 Eric Meyer最初发现的，但是我在网上找不到太多关于它的文档。所以我想在这里描绘一下这种技术。
