CSS3圆角边框“完全解读”

Posted 码匠与HTML5学堂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3圆角边框“完全解读”相关的知识，希望对你有一定的参考价值。


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

如何理解border-radius

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

CSS3圆角边框“完全解读”
基本语法

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

border-radius ： none |  {1,4} [/  {1,4} ]?；

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

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

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

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

CSS3圆角边框“完全解读”
详细案例分析

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

CSS3圆角边框“完全解读”
1）Pac-Man

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

  1. .pac-man {

  2.     width: 0px;

  3.     height: 0px;

  4.     border: 60px solid yellow;

  5.     border-color: yellow transparent yellow yellow ;

  6.     -webkit-border-radius: 60px;

  7.     -moz-border-radius: 60px;

  8.     -ms-border-radius: 60px;

  9.     border-radius: 60px;

  10. }

  11. <div class="pac-man"></div>

效果如下：

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

2）"爱心"制作

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

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

  1. .heart{

  2.     position: relative;

  3.     width: 160px;

  4.     height: 200px;

  5. } 

  6. .heart:before{

  7.     position: absolute;

  8.     left: 20px;

  9.     width: 80px;

  10.     height: 120px;

  11.     content: " ";

  12.     background: #f00;

  13.     -moz-border-radius: 100px;

  14.     -webkit-border-radius: 100px;

  15.     border-radius: 100px 100px 0 0;

  16.     -webkit-transform: rotate(-45deg);

  17. } 

  18. .heart:after{

  19.     position: absolute;

  20.     left: 48px;

  21.     top: 0px;

  22.     width: 80px;

  23.     height: 120px;

  24.     content: " ";

  25.     background: #f00;

  26.     -moz-border-radius: 100px;

  27.     -webkit-border-radius: 100px;

  28.     border-radius: 100px 100px 0 0;

  29.     -webkit-transform: rotate(45deg);

  30. }

  31. <div class="heart"></div>

效果如下：

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

3）阴阳图

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

  1. .wrap .gossip {

  2.     position: relative;

  3.     width: 96px;

  4.     height: 48px;

  5.     border-color: #000;

  6.     border-style: solid;

  7.     border-width: 2px 2px 50px 2px;

  8.     background: #fff;

  9.     border-radius: 100%;

  10. }

  11. .wrap .gossip:before {

  12.     position:

  13.     absolute;

  14.     top: 50%;

  15.     left: 0;

  16.     width: 12px;

  17.     height: 12px;

  18.     border: 18px solid #000;

  19.     background: #fff;

  20.     content: "";

  21.     border-radius: 100%;

  22. }

  23. .wrap .gossip:after {

  24.     position: absolute;

  25.     top: 50%;

  26.     left: 50%;

  27.     width: 12px;

  28.     height: 12px;

  29.     border: 18px solid #fff;

  30.     background: #000;

  31.     content: "";

  32.     border-radius:100%;

  33. } 

  34. <div class="gossip"></div>

效果如下：


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

欢迎沟通交流~


HTML5学堂

HTML5技术原创分享平台

加入HTML5学堂

原来技术可以通俗易懂

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

微信：HTML5_Course 微博：@前端技术分享网


以上是关于CSS3圆角边框“完全解读”的主要内容，如果未能解决你的问题，请参考以下文章

CSS3实现圆角边框除了像素还能怎么弄？

css圆角边框代码，css3中div圆角边框是怎么写的

CSS3 边框

css3基础CSS3 边框

css圆角边框代码，css3中div圆角边框是怎么写的

CSS3的边框圆角背景