CSS3的的Border-radius轻松制作圆角轻松制作圆角
前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。
在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，分别应用到每个角
上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几
个应用了圆角的标签进行定位到相应的位置，具体实现过程我就不在多讲，只看方法就知道烦死人。
如今CSS3中的border-radius出现后，让我们没有那么多的烦恼了，首先制作圆角图片的时间是省了，而且其还有多个优点：
其一减少网站的维护的工作量，少了对图片的更新制作，代码的替换等等;其二、提高网站的性能，少了对图片进行http的请
求，网页的载入速度将变快；其三增加视觉美观性。既然border-radius有这么多好处，我们就从他的语法，属性和属性值等方
面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：
一、语法：一、语法：
复制代码代码如下:
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
二、取值：二、取值：
<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。
三、说明：三、说明：
border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没
有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有
下面几种情形出现：
1、border-radius: [ <length>{1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等
2、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-
right等于bottom-left，并且取第二个值
3、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个
值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right
4、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];//如果有四个值，其中第一个值是设
置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left
前面，我们主要看了border-radius的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是
以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：
复制代码代码如下:
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius: <length> <length> //右下角
border-bottom-left-radius: <length> <length> //左下角
这里说一下，各角拆分出来取值方式：<length> <length>中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省
略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。
border-radius只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-
radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加
上“-moz”，而Webkit内核需要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览器，我们看看border-radius在不同内核
浏览器下的书写格式：
1、、Mozilla(Firefox, Flock等浏览器等浏览器)
复制代码代码如下:
-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角
等价于：
-moz-border-radius: //简写
2、、WebKit (Safari, Chrome等浏览器等浏览器)
复制代码代码如下:
-webkit-border-top-left-radius: //左上角
剩余7页未读，继续阅读
weixin_38625464
- 粉丝: 5
- 资源: 937
最新资源
- AllSort(直接插入排序，希尔排序，选择排序，堆排序，冒泡排序，快速排序，归并排序)
- 模拟qsort,改造冒泡排序使其能排序任意数据类型，即日常练习
- 数组经典习题之顺序排序和二分查找和冒泡排序
- 基于 Oops Framework 提供的游戏项目开发模板，项目中提供了最新版本 Cocos Creator 3.x 插件与游戏资源初始化通用逻辑
- live-ai这是一个深度学习的资料
- FeiQ.rar 局域网内通信服务软件
- 172.16.100.195
- 光储并网simulink仿真模型，直流微电网 光伏系统采用扰动观察法是实现mppt控制，储能可由单独蓄电池构成，也可由蓄电池和超级电容构成的混合储能系统，并采用lpf进行功率分配 并网采用pq控制
- python编写微信读取smart200plc的数据发送给微信联系人
- 光储并网VSG系统Matlab simulink仿真模型，附参考文献 系统前级直流部分包括光伏阵列、变器、储能系统和双向dcdc变器，后级交流子系统包括逆变器LC滤波器，交流负载 光储并网VSG系
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页