CSS3轻松实现圆角效果


Posted in HTML / CSS onNovember 09, 2017

在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性。

CSS3圆角的优点

传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:
 

* 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。
 

* 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。
 

* 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。

圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天,小编为大家介绍CSS3提供的可以将矩形变为圆角矩形的一个属性

CSS3轻松实现圆角效果

本节涉及到的CSS3属性为:

  • border-radius

一、圆角属性的取值:

CSS3轻松实现圆角效果

CSS3 使用border-radius属性设置圆角效果

该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为:

  • none,默认值,表示元素没有圆角效果
  • length,由浮点数字和单位标识组成的长度值
  • %,由百分比设置的圆角值

该属性可以分别设置元素的四个圆角效果,采用下列格式来实现。

格式:border-radius: 左上角 右上角 右下角 左下角;

通常,四个方向的角半径均采用length取值来实现,该取值必须为浮点数字和单位标识共同组成。同时规定,该取值不得取负数。

例1:利用整数来实现圆角取值。

div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}

上述实例设置了一个div块级元素,其宽度为200px,高度为150px。为了能够看到其圆角效果,增加了颜色为#ff5857的背景颜色,并且添加了1px大小的边框,其边框为实线,边框颜色为#aaaaaa。最后设置其圆角效果,左上角和右下角均为10px,右上角和左下角均为5px。

下面我们通过图示的形式,以左上角为10像素为例,来看一下这10元素是指哪段距离。一个角的圆角效果包括两部分:“水平角半径”和“垂直角半径”。一个角的取值为一个数据,表示其“水平角半径”和“垂直角半径”是相等的。

CSS3轻松实现圆角效果

水平角半径与垂直角半径相等

看来,border-radius属性的取值应该为四个值,表示四个方向的圆角幅度。若该属性在取值时,取值个数小于四个,又应该如何理解呢?

例2:查看下列CSS代码。

(1)border-radius: 10px 5px 15px 20px;

(2)border-radius: 10px 5px 15px;

(3)border-radius: 10px 5px;

(4)border-radius: 10px;

上述四组代码中,只有组(1)提供了完全符合格式的四个数据,其他三组均只提供了小于四个的数据。这种情况下,数据依然按照“左上角 右上角 右下角 左下角”的顺序进行排列,没有涉及到的角方向按照其对角的圆角数据进行设置。

因此,组(2)的数据表示:左上角为10px,右上角为5px,右下角为15像素,左下角为右上角的像素设置,即5px。请同学们根据这样的方法,理解一下组(3)的圆角含义。

组(4)就设置了一个数据,这表示四个方向的角半径均为10px。

二、独立设置元素的四个圆角效果:

若只想设置一个块级元素右上角的圆角效果,该如何实现呢?这里W3C为border-radius属性派生出了表示四个方向的独立圆角效果的子属性。

  • border-top-left-radius, 定义左上角的圆角效果
  • border-top-right-radius, 定义右上角的圆角效果
  • border-bottom-right-radius, 定义右下角的圆角效果
  • border-bottom-left-radius, 定义左下角的圆角效果

上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。

例3:设置p标记的圆角效果,其中左下角没有圆角效果,其他三个方向角的圆角效果均为25px。

方法1:利用border-radius属性统一设置。

p{border-radius: 25px 25px 25px 0;}

方法2:利用border-radius属性的派生子属性设置。

p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}

方法3:利用border-radius属性设置所有角方向均为25px,再利用border-radius属性的派生子属性设置左下角没有圆角效果。

p{
border-radius: 25px;
border-bottom-left-radius: none;
}

三、设置水平角半径和垂直角半径不同的圆角效果

W3C也提供了两个角半径不相同的圆角效果设置方式,这里依然以左上角为例,来展示两个角半径不同的设置方式。

格式:border-top-left-radius:水平角半径/垂直角半径;

上述格式中,两个方向的角半径之间利用斜杠(/)间隔。

例4:设置div块级元素的左上角圆角效果为:水平角半径50px,垂直角半径25px。

div{border-top-left-radius: 50px/25px;}

CSS3轻松实现圆角效果

水平角半径与垂直角半径不相等

例5:设置div块级元素为一个半径为100px的正圆形。

div{
width: 200px; height: 200px;
background-color: #ff5857;
border: solid 1px #aaaaaa;
border-radius: 100px;
}

上述代码中将块级元素的圆角效果半径设置为宽度或高度的一半,这样就可以得到一个半径为宽度或高度的一半的正圆形。

例6:设置div块级元素为一个长半轴为100px,短半轴为75px的椭圆形。

div{
width: 200px; height: 150px;
background-color: #ff5857;
border: solid 1px #aaaaaa;
border-radius: 100px/75px;
}

上述代码中将块级元素的水平角半径设置为宽度的一半,垂直角半径设置为高度的一半。由于这个块级元素的宽度和高度不一样,因此就可以得到一个椭圆形。

四、利用百分比实现圆角效果:

W3C规定,同样可以使用百分比来实现块级元素的圆角效果。这里,百分比值是相对于块级元素的宽度或高度来作为依据的。水平角半径的大小相对于块级元素的宽度值依据,垂直角半径的大小相对于块级元素的高度值依据。

例7:查看下列CSS代码。

div{
width: 200px; height: 200px;
border-radius: 20%;
}

上述代码中,div标记的圆角效果中,水平角半径为宽度的20%,即200px * 20% = 40px。垂直角半径为高度的20%,也为40px。

例8:查看下列代码。

div{
width: 200px; height: 100px;
border-radius: 20%;
}

上述代码中,div标记的圆角效果中,水平角半径为宽度的20%,即200px * 20% = 40px。垂直角半径为高度的20%,即100px * 20% = 20px。

也就是说,只要border-radius的取值为50%,则当宽度和高度相同时,得到一个正圆形;当宽度和高度不相同时,得到一个椭圆形。

总结

以上所述是小编给大家介绍的CSS3轻松实现圆角效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 #HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 #HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 #HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 #HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 #HTML / CSS
纯CSS3实现3D旋转书本效果
Mar 21 #HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 #HTML / CSS
You might like
php生成EAN_13标准条形码实例
2013/11/13 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python错误处理详解
2014/09/28 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
pandas分批读取大数据集教程
2020/06/06 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL