HTML5学堂-码匠 HTML5学堂

您当前位于:CSS3 ——> CSS3圆角边框 border-radius

CSS3圆角边框 border-radius

2015/05/27 00:41:45 | 作者:HTML5学堂(码匠) | 分类:CSS3 | 关键词:css3,圆角边框,radius

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加,从而使得服务器请求次数和需要加载的代码量增加,降低加载速度。

CSS3圆角的优势:

CSS3提供了更简便快捷的属性border-radius之后,实现边框圆角就非常的简单了,而且多了很多个优点,一方面减少了图片的HTTP的请求,一方面提高了网站的性能。还有一方面就是减少代码,提高了维护性。既然CSS3圆角提供了那么多的好处,我们看看CSS3的border-radius是如何实现圆角的。我们先来看看基本语法。

基本语法:

border-radius : none | <length>{1,4} [/ <length>{1,4} ]?

语法分析:

语法中符号的含义:

length的取值范围不为负数。

“[ ]”代表“可选”

“|”代表“或”

“{}”里的数字代表属性值的数量范围

“?”代表“一次”

“*”表示可出现多次

圆角书写方式:

在实现圆角之前,我们先来看几个效果,接着看CSS3圆角是如何实现的?

效果一: 扇形

结构代码:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title> h5course </title>
  6.     <meta name="Keywords" content="">
  7.     <meta name="Description" content="">
  8. </head>
  9. <body>
  10.     <div class=" h5course "></div>
  11. </body>
  12. </html>

CSS样式:

  1. . h5course {
  2.         border: 200px solid transparent;
  3.         width: 0;
  4.         border-radius: 200px;
  5.        border-top-color: red;
  6. }

效果如下:
HTML5学堂 CSS3圆角  H5course

 

欢迎沟通交流~HTML5学堂

效果二:椭圆形

    Html代码:

  1. <div class="h5course"></div>

CSS样式:

  1. html {
  2.     background: #000;
  3. }
  4. .h5course {
  5.         width: 400px;
  6.         height: 200px;
  7.         border: 2px solid #f36;
  8.         border-radius: 50% / 50%;
  9.         background: #ccc;
  10.         line-height: 200px;
  11.         text-align: center;
  12.         font-size: 25px;
  13.         font-family: "微软雅黑"
  14. }

效果如下:
HTML5学堂 CSS3圆角  H5course
 

如上例子的圆角是如何实现的呢?之前大家回想一下,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.有四个值,其中第一个值是设置左上角。而第二个值是右上角第三个值右下角,第四个值是设置左下角。

欢迎沟通交流~HTML5学堂

我们再来看一个实例,一步一步实现圆角效果:

  1. <div class="h5course"></div>

为了更好的看出效果,我们给这个demo添加一点样式:

  1. .h5course {
  2.             width: 150px;
  3.             height: 80px;
  4.             border: 2px solid #f36;
  5.             background: #ccc;
  6.         }

这时候在该元素上添加border-radius属性设置。

  1. .h5course {
  2.             width: 150px;
  3.             height: 80px;
  4.             border: 2px solid #f36;
  5.             background: #ccc;
  6.             border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
  7.         }

圆角兼容性:

border-radius只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、GoogleChrome10.0+、Opera10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器,一般加这些内核前缀的。

  1. .h5course {
  2.             width: 150px;
  3.             height: 80px;
  4.             border: 2px solid #f36;
  5.             background: #ccc;
  6.             -webkit- border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
  7.             -moz - border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
  8.             border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
  9.         }

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS