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>
效果如下:
代码解析:上述案例中,阴阳图的上半部分是宽高度展示的,下半部分是元素的边框展示的,然后借助两个伪元素记忆伪元素的边框来实现黑色和白色的小圆,从而实现整个阴阳图的制作。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Thymeleaf一篇就够了
- python scipy.stats实现各种常见的统计分布
- 操作系统基础 - 文件系统
- Linux升级OpenSSH修复高危漏洞
- Pytest之收集用例及命令行参数
- CVE-2020-14645:Weblogic远程代码执行复现
- 从0到1开发测试平台(七)后端服务添加swagger第三方类库
- leetcode - 分割数组的最大值
- leetcode - 除数博弈
- leetcode - 最小路径和
- Javascript中的数据类型
- JAVA 应用日志最佳实践
- 用pageadmin cms系统进行网站制作的经验总结
- 14个Linux系统安全小妙招,总有一招用的上
- CVE-2020-14645:Weblogic远程代码执行复现