html的圆角效果,CSS3轻松实现圆角效果
在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性。
CSS3圆角的优点
传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:
* 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。
* 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。
* 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。
圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天,小编为大家介绍CSS3提供的可以将矩形变为圆角矩形的一个属性
本节涉及到的CSS3属性为:
border-radius
一、圆角属性的取值:
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%,则当宽度和高度相同时,得到一个正圆形;当宽度和高度不相同时,得到一个椭圆形。
总结
以上所述是小编给大家介绍的CSS3轻松实现圆角效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html的圆角效果,CSS3轻松实现圆角效果相关推荐
- html中对局部图片进行圆角处理,CSS3实现DIV圆角效果完整代码
复制代码代码如下: CSS3实现DIV圆角 - CSS3教程 - 计划 - 博客园 font-family: Arial; border: 2px solid #379082; border-radi ...
- html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
- css3实现翻转效果,css3 实现3D翻转效果
css3 实现3D翻转效果. HTML源码: 前面内容,鼠标移到这,试试 用户名 密码 css源码: /* entire container, keeps perspective */ .flip-c ...
- html文字加描边效果,CSS3实现文字描边效果
以前想实现文字描边效果只能用PS制作图片,现在我们可以用CSS3就可以实现文字描边效果其实,不用图片还可以文字描边哦,下面看青岛星网的实现方式. CSS3实现文字描边效果,这里主要用到text-sha ...
- css中间镂空,css3如何实现遮罩层镂空效果 css3遮罩层镂空效果的多种实现方法
css3如何实现遮罩层镂空效果?本篇文章小编给大家分享一下css3遮罩层镂空效果的多种实现方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 先看看效果 [ 方法一:截图模 ...
- html中背景条纹效果,css3 条纹背景滚动效果
今天在一个网站上看到这样一个效果,我一开始以为一个背景gif图片,为了验证我的想法,我打开firebug 一查看,原来不是gif.是用css3完成的.于是我就在查看css3的api帮助下尝试着 写一写 ...
- html如何实现立体效果,CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...
- css加载更多动画效果,css3实现loading动画效果
通过css3动画实现三种loading加载动画 效果1:通过css3的border-radius与transform的rotate()实现 效果2:通过css3动画animation的animatio ...
- html显示线条流动效果,css3实现线条流动效果
1实现原理: 通过animation中的clip实现对div的不断切割 首先要弄懂clip的含义,四个参数分别是上右下左,以上和左为标准. clip使用的前提是元素绝对定位. 本来想实现这样效果看起来 ...
- html实现信封效果,CSS3 带简单动画效果的信封
CSS 语言: CSSSCSS 确定 @import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700); bo ...
最新文章
- 使用Redis分区将数据分割到多个Redis实例
- pycharm的演示模式、无干扰模式、全屏模式(presentation mode、distraction free mode、full screen mode)
- checkbox设置三种状态 qt_CheckBox复选框用法及实例代码
- uniapp 中 下拉刷新和上拉加载 需要手动在page.json中开启
- 简单十步让你全面理解SQL
- Cache缺失率的计算原理
- Tcl/tk glob nocomplain source
- [小结] flexbox
- c语言原型,C语言原型模式
- Podfile、Podfile.lock、Manifest.lock、Podspec
- vim学习 08——搜索替换
- 三茗硬盘保护系统安装Linux,重装windows系统而不影响linux引导的方法
- Spark机器学习库简介
- 正则表达式 压缩 HTML 字符串
- “有意思”的英语单词(5)
- linux内核 v4l2编译,Linux之V4L2基础编程
- apiCloud初探
- 吴莫愁公布恋情爱上哈林 演唱会庾澄庆单膝跪地似求婚
- 转载 测试面试问题总汇
- 我的滑板鞋-2017年在魅力之都继续摩擦
热门文章
- python考勤统计_公司HR统计考勤用这个函数公式,快速、准确完成,再也不加班了...
- 【供应链架构day2】美团收单供应链系统的演进之路
- python 短信_Python怎么接收手机短信?
- 适用于window平台的java虚拟机_雪豹系统安装说明
- JavaFX 2 Dialogs
- sap 双计量单位_SAP双计量单位实现基本要素.doc
- LabWindows/CVI(一):各文件类型的含义及初始项目的搭建
- 很全很强大的图形学相关的论文和源码
- VsCode切换语言
- 证件照排版软件_证件照的后期处理与打印