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圆角详解第一辑相关推荐

css 外弧_CSS3圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
CSS3 animation-fill-mode详解
CSS3 animation-fill-mode详解定义 animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式. 默认情 ...
IIS负载均衡-Application Request Route详解第一篇： ARR介绍
IIS负载均衡-Application Request Route详解第一篇: ARR介绍说到负载均衡,相信大家已经不再陌生了,本系列主要介绍在IIS中可以采用的负载均衡的软件:微软的Appli ...
PD3.1详解第一章EPR
** PD3.1详解第一章EPR ** 各大厂商逐渐在推广PD3.1的方案:从苹果的第一款PD3.1的适配器开始,目前慢慢的各种应用场合应用,比如一些电动工具,大功率储能产品等等. 首先PD3.1增 ...
CSS3中（border-radius）边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
TCP/IP详解--第一章
说明:专栏中的内容是<TCP/IP详解>这本书,博主分享在此. 第1章概述 1.1 引言很多不同的厂家生产各种型号的计算机,它们运行完全不同的操作系统,但 TCP/IP协 ...
devc 无法编译循环语句_鸡生蛋还是蛋生鸡？详解第一个编译器是怎么来的~
详解编译器自举原理不知道你有没有想过,某种编程语言的第一个编译器是怎么来的呢?这不就是"鸡生蛋,蛋生鸡"的问题吗? 先说最后的结论:任何一种语言的第一个编译器肯定是使用其他语言写 ...
VB6.0 ActiveX 控件开发详解 [第一章：创建工程]
前言在CSDN的VB论坛上,我总是能够看见有人这样问"有没有这样的控件,一个列表框,每一个项前面有一个按钮"(这是例子),又或者见到这样:"怎么样做一个ActiveX控 ...
孙鑫VC++深入详解第一章学习笔记
第一章 Windows程序内部运行机制 1.1 API和SDK API:Windows操作系统提供给应用程序编程的接口. SDK(软件开发包):用于开发的所有资源的集合. 1.2 窗口和句柄窗口句 ...

CSS3圆角详解第一辑

CSS3圆角详解第一辑相关推荐

最新文章

热门文章