css3帮你轻松实现圆角效果,不一样的前端页面。

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

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

技术等级:中级 | 适合有一定的CSS基础的人士阅读。

希望收藏了这篇文章的你同时也可以关注一下我,因为这些文章都是连载的,并且是经过系统的归纳和总结的。塌下心来认真阅读,你一定会学到对你有用的知识。

本节涉及到的CSS3属性为:

  • border-radius

一、圆角属性的取值:

web前端/html5学习群:250777811

欢迎关注此公众号→【web前端EDU】跟大佬一起学前端!欢迎大家留言讨论一起转发

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元素是指哪段距离。一个角的圆角效果包括两部分:“水平角半径”和“垂直角半径”。一个角的取值为一个数据,表示其“水平角半径”和“垂直角半径”是相等的。

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

看来,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;}

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

例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%,则当宽度和高度相同时,得到一个正圆形;当宽度和高度不相同时,得到一个椭圆形。

 

web前端/html5学习群:250777811

欢迎关注此公众号→【web前端EDU】跟大佬一起学前端!欢迎大家留言讨论一起转发

 看过了还想看,手指点点关注我!

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362136.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Vysper,TomEE和PrimeFaces将XMPP服务器嵌入JSF Web应用程序内部

我有一个需要在完成某些工作时通知用户的应用程序。 它使用JSF和Primefaces,因此可以使用大气 (也称为Push)来实现这种通知。 但是另一个有趣的方法是使用嵌入在Java Web应用程序中的XMPP服务器。 好的,好的,您不必嵌…

appium和selenium不同与相同之处

原文来自: https://www.cnblogs.com/zhengshuheng/p/6370398.html selenium是web端的自动化,appium是app端的自动化,它继承了webdriver(也就是selenium 2) 转载于:https://www.cnblogs.com/lv-lxz/p/11118862.html

Mockito 101

Mockito是一个模拟框架,可让您使用简洁的API编写漂亮的测试。 它偏向于最低规格,使不同的行为看起来有所不同,并显示清晰的错误消息。 创造嘲弄 要使用Mockito创建模拟,只需使用Mock注释模拟,然后调用MockitoAnnotati…

前端开发常用代码片段(下篇)

二十二、正则表达式 //验证邮箱/^\w ([0-9a-zA-Z] [.]) [a-z]{2,4}$///验证手机号/^1[3|5|8|7]\d{9}$///验证URL/^http:\/\/. \.///验证身份证号码/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)///匹配字母、数字、中文字符/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$///匹配中文字符/[\u4e00-\u9…

使用 Visual Studio 编译 wget 为库文件

添加代码与预编译指令与上一篇使用 Visual Studio 编译 wget 为可执行文件一致,区别在于这回建的是静态库工程(编译为动态库过程类似:)) 从wget的main函数开始读下来,发现问题不少,程序可能基于效率或者编码方便的因素…

动态规划(0-1背包)--- 改变一组数的正负号使得它们的和为一给定数

改变一组数的正负号使得它们的和为一给定数 494. Target Sum (Medium) Input: nums is [1, 1, 1, 1, 1], S is 3. Output: 5 Explanation:-11111 3 1-1111 3 11-111 3 111-11 3 1111-1 3There are 5 ways to assign symbols to make the sum of nums be target 3. 题目描述…

关于设计模式的胡思乱想

设计模式是一个指导,并不强制。有很多地方并不需要设计模式介入,因为设计模式是分离变化,很多代码是一次性的,不会变。如果我们一开始写程序的时候就加入设计模式,这样就显得过度设计,既耗时又费力。 并且…

JSR 310新日期/时间API的自定义JSR 303 Bean验证约束

借助JSR 310,Java 8终于为我们带来了不错的日期和时间API。 对于仍在使用Java 7的那些人(例如我目前在我的当前项目中),有很好的反向移植,请访问www.threeten.org了解更多详细信息。 但是,由于有关该主题的…

H5之audio标签放音兼容所有浏览器方法

前端交流群&#xff0c;群文件提供大量文档、书籍和资料。期待你的加入&#xff01;群号&#xff1a;127768464 由于项目需要&#xff0c;最近刚做了一个网页放音的功能&#xff0c;使用到了H5新标签<audio></audio>&#xff0c;但是audio只能支持IE8以上的浏…

VisualStudio2010 SP1 SP1 SDK SQLServer 2008 SP3 下载地址

SP1:http://go.microsoft.com/fwlink/?LinkId210710 SP1 SDK:http://www.microsoft.com/download/en/details.aspx?id21835 SQLServer2008 sp3:http://www.microsoft.com/downloads/zh-cn/details.aspx?familyid757bca07-7b52-46fb-ab92-476be9339442&displaylangzh-cn …

python高级特性:迭代器与生成器

前言 有一个列表 l [a,b,c,d,e] 我想取列表中的内容&#xff0c;有几种方式&#xff1f; # 1.最简单的方法用for循环。 for i in l:print(i,end" ") # 2.用列表内置的方法。 while 1:if l:print(l.pop(),end" ") 这是用常见的方式取出列表中的数据。 …

webpack中实现按需加载

当页面中一个文件过大并且还不一定用到的时候&#xff0c;我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间&#xff0c;提高访问速度。 使用webpack打包的出来的文件要实现以上的要求有两种方式&#xff0c;一个是webpack特有的require.en…

H5各种头部meta标签的功能

<!DOCTYPE html> H5标准声明&#xff0c;使用 HTML5 doctype&#xff0c;不区分大小写 <head lang”en”> 标准的 lang 属性写法 <meta charset’utf-8′> 声明文档使用的字符编码 <meta http-equiv”X-UA-Compatible” content”IEedge,chrome1″…

如何使用单例EJB和MBean构建和清除参考数据缓存

在我的一个项目中&#xff0c;我需要使用EclipseLink作为ORM框架从Java EE 6 WebLogic环境中的多个源中加载参考数据。 由于我在Java EE世界中找不到与Spring YET的Cacheable相当的注释&#xff0c;因此我不得不编写自己的缓存解决方案。 尽管参考数据几乎不会随时间变化&#…

让 UV4 支持STC 单片机

Keil 本身并没有自带 STC 8051 单片机的数据&#xff0c;这样用起来就非常令人不爽&#xff0c;好在国内有个青年已经整理了一个补丁。 这个补丁包含三个修正&#xff1a; 汉字bug修正&#xff0c;这个是老生常谈了&#xff0c;很奇怪Keil十年来都没有修正这个&#xff0c;说明…

【总结】计算机网络常见问题

1、TCP/IP协议与OSI协议 相互通信的两个计算机系统必须高度协调工作才行&#xff0c;而这种“协调”是相当复杂的。 “分层”可将庞大而复杂的问题&#xff0c;转化为若干较小的局部问题&#xff0c;而这些较小的局部问题就比较易于研究和处理。 计算机网络采用了分层的体系结构…

webpack3的CommonsChunkPlugin插件详解

webpack打出来的包在不做处理的情况下是非常大的&#xff0c;所有依赖都被塞进一个文件中&#xff0c;文件中有业务代码&#xff0c;有业务代码依赖的第三方库代码&#xff0c;还有webpack生成的运行时代码等。这样的一个文件不方便静态资源缓存&#xff0c;并且初始化页面的时…

详细介绍jQuery.outerWidth() 函数具体用法

outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)&#xff0c;但不包括外边距(margin)部分的宽度。你也可以指定参数为true&#xff0c;以包括外边距(margin)部分的宽度。如下图&#xff1a; 如果你要获取其它情况的宽…

自动装箱

自Java 1.5起&#xff0c;所有Java开发人员都可以使用自动装箱功能。嗯&#xff0c;我可能太乐观了。 至少所有开发人员都应该可以使用自动装箱。 毕竟&#xff0c;在ORACLE页面上有一个很好的教程。 自动装箱是Java编译器在需要时自动从原始类型创建代码创建对象的代码时的现…

SQLite 入门教程(一)基本控制台(终端)命令

一、基本简介 SQLite 是一个自持的&#xff08;self-contained&#xff09;、无服务器的、零配置的、事务型的关系型数据库引擎。因为他很小&#xff0c;所以也可以作为嵌入式数据库内建在你的应用程序中。SQLite 被应用在 Solaris 10操作系统、Mac OS 操作系统、iPhone 和 Sky…