css实现圆角矩形、半圆、圆形效果—border-radius使用详解

传统的圆角矩形实现,必须使用多张图片作为背景图案。CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了。

css实现圆角矩形、半圆、圆形效果的优点:

* 减少维护的工作量,不再需要使用图片。

* 提高网页性能,网页的载入速度将变快。

* 增加视觉可靠性。某些情况下,背景图片会下载失败,CSS3就不会发生这种情况。

 

border-radius属性

CSS3圆角只需设置一个属性:border-radius(含义是”边框半径”)。

为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

比如,下面是一个div方框:

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

现在设置它的圆角半径为15px:

border-radius: 15px;

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

这条语句同时将每个圆角的”水平半径”(horizontal radius)和”垂直半径”(vertical radius)都设置为15px。

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。

如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。

如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。

如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

border-radius: 15px 5px;

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

border-radius: 15px 5px 25px;

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

border-radius: 15px 5px 25px 0px;

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

(左下角的半径为0,就变成直角了。)

单个圆角的设置

除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

  border-top-left-radius
  border-top-right-radius
  border-bottom-right-radius
  border-bottom-left-radius

这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。

如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。

border-top-left-radius: 15px;

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

border-top-left-radius: 15px 5px;

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

注意:

CSS3实现圆角需要使用border-radius属性,但因为浏览器兼容性的问题,在开发过程中要加私有前缀。

-webkit-border-radius
-moz-border-radius
-ms-border-radius
-o-border-radius

border-radius的优势不仅仅在制作圆角的边框,还是利用border-radius属性来画圆和半圆。

1、制作半圆的方法:

元素的高度是宽度的一半,左上角和右上角的半径元素的高度一致(大于高度也是可以的,至少为height值)。

<div class="semi-circle"></div>
.semi-circle{
    width:100px;
    height:50px;//高度是宽度的一半
    background-color:#000;
    border-radius:50px 50px 0 0;//左上和右上至少为height值
}

效果: 

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

知道了如何画上半圆,就会举一反三画其他方向的圆了,看完教程要马上试一试哦,学习网页制作关键在动手实践!

2、画实心圆的方法:

原理:设置DIV宽度和高度一致(正方形),然后四个角设置为高度或者宽度的1/2.

<div class="circle"></div>
.circle{
    width:100px;
    height:100px;
    background-color:#cb18f8;
    border-radius:50px;
}

效果:

css实现圆角矩形、半圆、圆形效果—border-radius使用详解

本文来自投稿,不代表125jz立场,如若转载,请注明出处:http://www.125jz.com/1060.html

(2)
江山如画的头像江山如画管理团队
上一篇 2018年2月3日 上午9:53
下一篇 2018年2月3日 下午7:53

99%的人还看了以下文章

  • CSS3 制作精美圆角立体button

    CSS3 制作的精美圆角立体button,你可以改变代码,制作出自己需要的颜色和样式的按钮,点击下方运行查看效果。无标题文档 125JZ www.125jz.com 125JZwww.125jz.com 125JZ www.125jz.com

    2018年2月3日
    2.8K0
  • 实施多元化线上教学,引导学生自主学习

    如何有效开展线上教学,调动学生的学习热情、课堂参与,是当下高校教师普遍关心的问题。结合使用腾讯会议+雨课堂的《生态学》线上教学,我的教学总结和反思如下: 设计好线上课程的整体布局和开展思路,让学生熟悉各授课环节。授课前通过雨课堂发布预习课件,如:阅读电子材料、观看嵌入式视频、设置目标思考题、完成预习检测、课堂讨论或其拓展调研题目等。学生自主完成学习,建立初步…

    2020年5月9日
    2.0K0
  • 网页中的块级元素和行内元素

    块级元素(block-level)在默认显示状态下占据整行,其他元素在下一行中显示。例如,<p>、<h1>、<div>等元素都是块级元素。 行内元素(inline-level,也叫作“内联”元素)与块级元素相反,在默认显示状态下,允许下一个对象与它本身在一行中显示。例如,<strong>、<a>、&…

    2018年7月10日
    2.2K0
  • css语法及命名规范(入门)

    css语法规范: 每条属性声明占一行,增加易读性 /*bad*/ body{margin: 0;padding: 0;} /*good*/ body{ margin: 0; padding: 0; } 颜色采用十六进制写法,并尽量简写: /*bad*/ .example{ color: #ffaabb; } /*good*/ .example{ color:…

    2018年7月10日
    2.0K0
  • DIV+CSS自适应布局:三列布局

    自适应布局允许网页宽度或高度自动调整,以获得良好的用户体验。自适应布局有高度自适应和宽度自适应,本文讲解了三列布局,学会三列自适应布局,两列自适应布局的原理一样。

    2018年2月20日
    3.6K0
  • 18个优秀的CSS前端效果代码-网页设计师收藏

    网页设计师收藏的18个优秀的CSS前端效果代码

    2018年2月20日
    2.4K0

发表回复

登录后才能评论