pac-man

HTML5学堂小编：圆形，一个很奇妙的形状，在各种地方都可以看得到，特别是现在各类网站，都会有各种的圆形。圆角的制作曾经困扰了 开发者 很久，以至于以前 开发者 只能使用图片来替代。但是当CSS3的这个border-radius出现之后，对于开发者而言简直就是福利，只需要在需要圆的地方给上一句代码就可以了。一起来学习学习吧~~~ 如何理解border-radius border-radius——CSS3的圆角属性。但是除了圆角的定义外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第2），而把这些角按照不同的顺序和大小来展现，也能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。 基本语法 想要完成上述的这些图例，我们及很有必要来了解一下其语法到底是怎么样的。书写形式如下： border-radius ： none | {1,4} [/ {1,4} ]?； none代表的是不设置圆角。后面的参数值代表水平或者垂直方向的圆角值设置，其中前部分参数 {1,4}代表水平方向的值，后部分参数[/ {1,4} ]?代表垂直方向的值，可省略。 提醒：border-radius是CSS3的属性，书写的时候建议加上内核前缀。 border-radius可以通过值来定义样式相同的角

正方形 #square { width: 100px; height: 100px; background: red; } 长方形 #rectangle { width: 200px; height: 100px; background: red; } 圆形 .circle { width: 100px; height: 100px; background: red; border-radius: 50px; } 椭圆 .oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; } 上三角 .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 下三角 #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } 左上三角