CSS3圆角详解第一辑

Posted 10manongit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3圆角详解第一辑相关的知识,希望对你有一定的参考价值。

有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角。
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角。

一.CSS3圆角的优点
在没有出现圆角属性之前,传统的制作圆角的方式就是拜托美工给我们出一张图片了,那么我们就需要使用多张图片作为背景图。

CSS3的出现为我们省了很多时间并且提高了工作效率。简单的总结了以下几个优点:
  * 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不需要了。
  * 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。
  * 增加视觉可靠性。一些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。

二.border-radius属性
CSS3圆角很简单,只需要设置一个属性,border-radius边框半径,可以接受一个至四个属性值:
1.一个值:
border-radius:15px;

技术图片

这条语句的意思是div的四个角都是以15px为半径画圆,形成四周的一个圆角。

技术图片

2.两个值:
border-radius:15px 50px;

技术图片

这条语句的意思是div的四个角是以顺时针顺序为主,没有值的与对角相同,左上15px 右上50px 右下与对角左上相同15px 左下与右上相同50px,形成四周的一个圆角。

3.三个值:
border-radius:0px 30px 50px;

技术图片

这条语句的意思是div的四个角是以顺时针顺序为主,没有值的与对角相同,左上0px 右上30px 右下50px 左下与右上相同30px,形成四周的一个圆角。

4.四个值:
border-radius:0px 30px 50px 100px;

技术图片

这条语句的意思是div的四个角是以顺时针顺序为主,左上0px 右上30px 右下50px 左下100px,形成四周的一个圆角。

当然单位不仅仅可以是px像素值,还可以是em,ex,百分比等等

到目前为止,通过border-radius属性的四个值的不同设置,可以达到不同的圆角效果,其实在工作中我们使用圆角最多的地方就是在做圆了,圆形很简单,首先你要保证div是一个正方形,然后设置border-radius的值为正方形边长的一半就是圆了。
width:200px;
height:200px;
border-radius: 100px;
技术图片

现在是不是对border-radius属性清楚很多,快去试试吧!
感谢上海尚学堂H5前端技术支持,欢迎点击访问获得更多前端实用技术资料知识。

















以上是关于CSS3圆角详解第一辑的主要内容,如果未能解决你的问题,请参考以下文章

CSS3圆角属性详解

css3圆角属性详解

css3浏览器私有属性前缀使用详解

二次元的CSS—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

两种CSS3圆环进度条详解

使用box-shadow属性实现圆角效果代码实例