CSS3圆角 border-radius
HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加,从而使得服务器请求次数和需要加载的代码量增加,降低加载速度。
CSS3圆角的优势:
CSS3提供了更简便快捷的属性border-radius之后,实现边框圆角就非常的简单了,而且多了很多个优点,一方面减少了图片的HTTP的请求,一方面提高了网站的性能。还有一方面就是减少代码,提高了维护性。既然CSS3圆角提供了那么多的好处,我们看看CSS3的border-radius是如何实现圆角的。我们先来看看基本语法。
基本语法:
border-radius : none | <length>{1,4} [/ <length>{1,4} ]?
语法分析:
语法中符号的含义:
length的取值范围不为负数。
“[ ]”代表“可选”
“|”代表“或”
“{}”里的数字代表属性值的数量范围
“?”代表“一次”
“*”表示可出现多次
圆角书写方式:
在实现圆角之前,我们先来看几个效果,接着看CSS3圆角是如何实现的?
效果一: 扇形
结构代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> h5course </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div class=" h5course "></div>
</body>
</html>
CSS样式:
. h5course {
border: 200px solid transparent;
width: 0;
border-radius: 200px;
border-top-color: red;
}
效果如下:
效果二:椭圆形
结构代码:
<div class="h5course"></div>
CSS样式:
html {
background: #000;
}
.h5course {
width: 400px;
height: 200px;
border: 2px solid #f36;
border-radius: 50% / 50%;
background: #ccc;
line-height: 200px;
text-align: center;
font-size: 25px;
font-family: 微软雅黑"
}
效果如下:
如上例子的圆角是如何实现的呢?之前大家回想一下,margin和padding的书写顺序。是不是四种写法,
1. margin一个值,表示盒模型的margin的上,下,左,右四个方向值
2. margin两个值,表示的是margin第一个值为margin的上,下方向值。第二个值为margin的左,右方向值。
3. margin三个值,表示的是margin第一个值为margin的上方向值。第二个值为margin的左,右方向值。第三个值为margin的下方向值.
4. Margin四个值,表示的是margin第一个值为margin的上方向值。第二个值为margin的右方向值。第三个值为margin的下方向值。第四个值为margin的左方向值.
而border-radius的书写顺序也是和margin类似,分别表示左上角、右上角、右下角、左下角。“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两边都遵循(margin四个值)的顺序原则。
1.只有一个值,那么左上角、右上角、右下角、左下角四个值相等。
2.有两个值,那么左上角等于右下角,并且取第一个值;右上角等于左下角,并且取第二个值
3.有三个值,其中第一个值是设置左上角,而第二个值是右上角、左下角,并且他们会相等,第三个值是设置右下角。
4.有四个值,其中第一个值是设置左上角。而第二个值是右上角第三个值右下角,第四个值是设置左下角。
我们再来看一个实例,一步一步实现圆角效果:
<div class="h5course"></div>
为了更好的看出效果,我们给这个demo添加一点样式:
.h5course {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
}
这时候在该元素上添加border-radius属性设置。
.h5course {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}
圆角兼容性:
border-radius只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome10.0+、Opera10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器,一般加这些内核前缀的。
.h5course {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
-webkit- border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
-moz - border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}
欢迎沟通交流~HTML5学堂
- 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 实例
- [记录点滴] 一个解决Lua 随机数生成问题的办法
- [记录点滴] 记录一次用 IntelliJ IDEA遇到scope provided 的坑
- [记录点滴] 一个Python中实现flatten的方法
- [源码解析]Oozie来龙去脉之提交任务
- [记录点滴]Ionic编译过程的研究
- [记录点滴]OpenResty 支持http v2的问题
- [源码解析]Oozie来龙去脉之内部执行
- [记录点滴]编译安装luarocks、luacheck、luautf8
- [笔记整理] 一维搜索
- [记录点滴] 使用工具和命令对redis数据进行备份恢复
- [记录点滴]Spring Boot Admin源码分析笔记
- [记录点滴] luaxml编译过程
- [源码解析] Flink UDAF 背后做了什么
- [源码解析] 当 Java Stream 遇见 Flink
- [源码解析] Flink的Slot究竟是什么?(1)