文档章节

你不知道的CSS3圆角

起风了夏天
 起风了夏天
发布于 2017/07/05 10:08
字数 1291
阅读 8
收藏 0

更多文章:分针网www.f-z.cn

对于CSS3中的圆角属性我们大家都很熟悉了,那就是border-radius。

border-radius虽然很熟悉,但是我们在工作当中绝大多数用到的只不过是其中的一点皮毛而已,比如用于制作圆角矩形,或是圆。

那么本文所要分享的呢,是平时大家可能很少用上但是却有必要了解的内容。

首先给出border-radius具体语法:

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

<length>:用长度值设置对象的圆角半径长度。不允许负值

<percentage>:用百分比设置对象的圆角半径长度。不允许负值

以上可能对于了解正则表达式的来说比较好理解,通俗来讲就是,该属性可以同时设置1到4个属性值,每个属性值均可以是具体数值或百分比,百分比的话是相对于该元素的宽高属性来定的。此外还可以用斜杠设置第二组值,若是设置了第二组值,那么前一组将代表水平方向上的值,后一组代表垂直方向上的值。

接下来,我将以具体实例来一步步全面剖析border-radius属性。

先写一个通用的矩形:

<!--HTML-->

<div class="box"></div>

/*CSS*/

.box{ width: 200px; height: 100px; border: 1px solid #000;}

一、只设置一个属性值

① 设置具体值

.box{ border-radius: 20px;}

这个其实就是我们平时用得最多的一种,就是使该矩形四个角的水平方向和垂直方向上的圆角半径均为20px。

.box{ border-radius: 60px;}

可以发现,此时设置的border-radius: 60px其实与设置border-radius: 50px效果是一样的,因为该矩形高度为100px,而垂直方向上设置圆角半径最大也就是矩形高度的一半,也就是50px,如果超过了该值,那么显示效果会保持不变,而水平方向呢,则会与其垂直方向的圆角半径保持一致,也是50px的显示效果,不会因为这里设置了60px而显示为60px。简单来说,若水平和垂直方向只设置一个圆角半径值,那么该值的最大值以元素短边的长度为准。

② 设置百分比

.box{ border-radius: 50%;}

这其实也经常使用,只不过我们平时一般都是用来画圆。这里的50%指的是水平方向上的圆角半径为该矩形宽度的50%,垂直方向即为高度的50%。

二、设置一个以上属性值

① 设置具体值

.box{ border-radius: 20px 50px;}

border-radius: 20px 30px 40px

.box{ border-radius: 20px 30px 40px 50px;}

以上这些其实也都很好理解,不管设置多少个值都可以类比margin或padding属性。我们都知道,margin也可以同时设置1到4个属性值,若是设置四个属性值,则依次按照上、右、下、左这样的顺时针方向设置外边距。同理,border-radius也类似,若是设置四个属性值,它是依次按照左上、右上、右下、左下这样的顺时针方向设置圆角半径的。若是设置两个或者三个属性值也是同样的方式类比,这里就不再赘述了,自己慢慢领会。

② 设置百分比

原理与一中所述类似,不再赘述。

三、用斜杠设置第二组值

① 设置具体值

.box{ border-radius: 30px/50px;}

斜杠前面的30px代表每个角上的水平方向的圆角半径均为30px,斜杠后面的50px代表每个角上的垂直方向的圆角半径均为50px。

.box{ border-radius: 20px 80px/30px 30px;}

可以看到,此时的矩形看起来似乎已经开始扭曲变形,其实原理的话与前面所述是一样的,这个例子的样式也可以写成border-radius: 20px 80px/30px, 显示效果其实是一样的。

其实还有很多可能的组合值,这里便不再举例,原理同上。

② 设置百分比

原理与一中所述类似,不再赘述。

四、单独设置某个角的圆角半径

① 只设置一个属性值

.box{ border-bottom-left-radius: 100%;}

哈哈~~ 是不是看起来很像一把杀猪刀?

这个其实也同样可以类比margin或padding,因为它们也可以单独设置某个方向上的边距值。除了示例中的border-bottom-left-radius属性之外,还有border-top-left-radius、border-top-right-radius和border-bottom-right-radius属性,具体含义看属性名相信聪明的你也能明白的。

当然同样的,除了设置示例中的百分比之外,也是可以设置具体值的,这个只要懂得举一反三就行啦~~

② 设置两个属性值

.box{ border-bottom-right-radius: 120px 100px;}

需要注意的是,这里表达水平方向和垂直方向就不是用斜杠分开了,而是直接用空格隔开就行。

兼容性: IE9及以上浏览器都兼容,目前其他现代浏览器也兼容完好,可放心使用。

 

领取免费学习资料,电子书

可加入前端学习交流q群:272292492

本文转载自:http://www.f-z.cn/id/269

起风了夏天
粉丝 1
博文 10
码字总数 23
作品 0
崇明
私信 提问
CSS3 边框(Borders)

CSS3 Borders 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 浏览...

wybo521
2016/01/23
34
0
使用selectivizr 兼容ie8 的问题

使用selectivizr.js 让ie8 兼容css3的border-radius,但是又出了其他的问题,不知道是什么原因引起的,希望各位大神指导思路和方向。 如图,标签有了圆角,但是元素看起来似乎是向左下角移动...

TinkerJ
2016/08/13
213
0
好程序员web前端分享CSS3 边框

好程序员web前端分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。 在本章中,您将学到以下边框属性: border...

好程序员IT
05/15
0
0
纯CSS3绘制的猫咪老师——献给喜欢CSS3及《夏目友人帐》的你

最近正发愁着毕业设计做些什么,而后闲逛时看到了诸如twitter小鸟、哆啦A梦、灰太狼等纯CSS3实现的图像。于是本着初学的心态,挑了喜欢的卡通形象来解闷。   于是花了一个晚上做完,现在想...

失明的色盲
2012/04/13
0
1
10款精心挑选的在线 CSS3 代码生成工具

今天这篇文章向大家推荐十款非常有用的在线 CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效。 CSS3 是对 CSS 规范的改善和增强,增加了圆角、旋转、阴影、渐变和动画等众多强大...

cacao111
2018/07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
4
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
3
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
13
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部