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学堂

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

原文发表时间:2015-12-13

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吾爱乐享

php学习之css常用的属性(三)

1313
来自专栏林德熙的博客

win10 uwp 圆角按钮

本文讲的是如何做圆角按钮,我们在UWP本来的按钮都是矩形,圆角Radius没有,所以本文就用简单方法去做圆角按钮。

251
来自专栏Python

Python中的栈溢出及解决办法

1.递归函数 在函数内部,可以调用其他函数。如果一个函数在内部调用自身本身,这个函数就是递归函数。 举个例子,我们来计算阶乘n! = 1 x 2 x 3 x ....

2694
来自专栏calmound

hdu 1498 50 years, 50 colors(二分匹配,最小点覆盖)

题意:n*n的矩阵放置不同的颜色(不同的数字代表不同的颜色),你有k次选择,每一次只能选择某一行或某一列,可以消除该行(列)的所有颜色,问有哪几种颜色,无论怎样...

2654
来自专栏DT乱“码”

python获取日期和判断字符串

# Filename : util.py # author by gulf # 引入 datetime 模块 import datetime #获取昨天...

3347
来自专栏闻道于事

表格及布局——0606上午

今天上午学习了表格的应用以及如何用表格进行页面布局。以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

27610
来自专栏鸿的学习笔记

python的字典和集合

dict类型可以说是python里模块的命名空间,实例的属性,函数的关键字参数都有其的参与。

743
来自专栏CDA数据分析师

Python 异常处理总结

什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行。一般情况下,在Python无法正常处理程序时就会发生一个异常。 异常是Py...

1886
来自专栏开发与安全

散列表(二):冲突处理的方法之链地址法的实现(哈希查找)

首先需要澄清的一点是,这里讲的是hash table/hash map ,即数据项所存储的表要用数组来实现。 一、链地址法 这种基本思想:将所有哈希地址为i 的...

1890
来自专栏软件测试经验与教训

Python 异常处理

3134

扫描关注云+社区