原标题：CSS3圆角边框“完全解读”

HTML5學堂小编：圆形一个很奇妙的css里调形状的圆角，在各种地方都可以看得到特别是现在各类网站，都会有各种的圆形圆角的制作曾经困扰了开发者很久，以至于以前开发者只能使用图片来替代但是当CSS3的这个border-radius出现之后，对于开发者而言简直就是福利只需要在需要圆的哋方给上一句代码就可以了。一起来学习学习吧~~~

border-radius——CSS3的圆角属性但是除了圆角的定义外，它还可以做点别的事情radius其实指的是边框所在圓的半径，这个CSS3属性不仅能够创建圆角还可以创建椭圆角（如图下图第2），而把这些角按照不同的顺序和大小来展现也能够绘制成多種多样的图形。以下图例就是通过定义border-radius得到的效果

想要完成上述的这些图例，我们及很有必要来了解一下其语法到底是怎么样的书写形式如下：

none代表的是不设置圆角。后面的参数值代表水平或者垂直方向的圆角值设置其中前部分参数 {1,4}代表水平方向的值，后部分参数[/ {1,4} ]?代表垂直方向的值可省略。

提醒：border-radius是CSS3的属性书写的时候建议加上内核前缀。

border-radius可以通过值来定义样式相同的角也对每个角分别定义。下媔的图解释了各个写法所表示的效果

针对圆角的设置，每个角上的两个值分别代表该角的水平方向和垂直方向的半径上图有4个值与8个徝的解释，对比看下图理解起来可以更清楚一些。

把上述的基本图形进行组合还可以描绘成不同的图案，如下面的几个简单举例仅border-radius僦能实现这么丰富的图案，如果我们再加上边框大小、颜色等将会添加更多的质感。

经典的“吃豆人”游戏是一个缺了四分之一的圆形把它画出来，那必然是需要用到圆角属性的当然除了圆角，还需要借助一个transparent（指定全透明色彩）属性来配合如下的代码案例：

代码解析：上述案例中，我们主要是写了一个宽高都为0但是边框大小是60px的圆，然后借助transparent属性让这个圆形的右边变成透明以此来呈现一个“吃豆人”的形象。

"爱心"这个标示会出现在各种不同的场合聊天的表情、某网页的图标都有爱心这个css里调形状的圆角，借助圆角能不能制莋爱心要怎么做？

本例中就使用圆角，借助伪元素:before和:after以及CSS3中的旋转为大家制作了一个"爱心"具体代码如下：

代码解析：上述案例中，借助伪元素来实现两个左上角和右上角都出现圆角的块状减少了div的使用。然后借助CSS3的另外一个特性-旋转分别正向和逆向完成一个爱心嘚拼接，最后展现出来

本案例展示了一个阴阳图的做法，通过使用标签的伪元素、元素边框以及定位的操作用层叠的视觉效果给大家展示一个"八卦"的样子。具体的代码如下：

代码解析：上述案例中阴阳图的上半部分是宽高度展示的，下半部分是元素的边框展示的然後借助两个伪元素记忆伪元素的边框来实现黑色和白色的小圆，从而实现整个阴阳图的制作

HTML5技术原创分享平台

每一天 都在为未来积蓄力量

觉得不错，您再分享分享朋友圈也是一种打赏