CSS3圆角边框“完全解读”

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可以通过值来定义样式相同的角,也对每个角分别定义。下面的图解释了各个写法所表示的效果。

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

详细案例分析

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

1)Pac-Man

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

.pac-man {
    width: 0px;
    height: 0px;
    border: 60px solid yellow;
    border-color: yellow transparent yellow yellow ;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    border-radius: 60px;
}
<div class="pac-man"></div>

效果如下:

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

2)"爱心"制作

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

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

.heart{
    position: relative;
    width: 160px;
    height: 200px;
} 
.heart:before{
    position: absolute;
    left: 20px;
    width: 80px;
    height: 120px;
    content: " ";
    background: #f00;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px 100px 0 0;
    -webkit-transform: rotate(-45deg);
} 
.heart:after{
    position: absolute;
    left: 48px;
    top: 0px;
    width: 80px;
    height: 120px;
    content: " ";
    background: #f00;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px 100px 0 0;
    -webkit-transform: rotate(45deg);
}
<div class="heart"></div>

效果如下:

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

3)阴阳图

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

.wrap .gossip {
    position: relative;
    width: 96px;
    height: 48px;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    background: #fff;
    border-radius: 100%;
}
.wrap .gossip:before {
    position:
    absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    border: 18px solid #000;
    background: #fff;
    content: "";
    border-radius: 100%;
}
.wrap .gossip:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 18px solid #fff;
    background: #000;
    content: "";
    border-radius:100%;
} 
<div class="gossip"></div>

效果如下:

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-10-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏marsggbo

”盒模型“之如何防止边框和内边距把元素撑开

在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型。当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。看下...

1816
来自专栏程序你好

CSS盒子(Box)模型入门

无论您是CSS的新手还是经验丰富的老手,了解和理解box模型都很重要。让我们更好地了解它。

832
来自专栏一直在跳坑然后爬坑

Flutter 图片如何充满父布局

正常我们需要显示一张图片,会用到Image这个控件。 打个比方,我们加载一张本地的图片, 先看一下这个Image.asset的源码:

1143
来自专栏HTML5学堂

“鼠标移入显示悬浮框”特效,也可以“高大上”

HTML5学堂(码匠):网站中最为常见的一种特效——鼠标移入元素,出现介绍信息的悬浮框,要么是淡入,要么是单方向的滑入,总觉得太单一了有木有?其实,稍微调整一下...

3449
来自专栏超然的博客

响应式图像

将picture元素和srcset,sizes属性纳入html5规范,新规范意在解决:

521
来自专栏超然的博客

弹窗细节

  浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。

753
来自专栏Nian糕的私人厨房

CSS 布局_1 盒模型

盒模式是 CSS 中一个重要的概念,即元素在页面所占据的空间位置,盒模型的属性包括:内容 (content)、填充 (padding)、边框 (border)、...

554
来自专栏Micro_awake web

重温CSS3

基础不牢,地动山摇!没办法,只能重温“经典”! 1.CSS3边框:border-radius;  box-shadow;  border-image borde...

2228
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之padding

1、padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸;②width非auto,padding影响尺寸;③wi...

2807
来自专栏前端小叙

设置同样字体大小,chrome浏览器有时字体偏大的解决办法(转)

本文是找了在网上搜了好久才找到非常棒的一篇文章,很好的解决了这个问题。 原文地址:https://github.com/amfe/article/issues/...

3525

扫描关注云+社区