border-radius 实例详解

《border-radius 实例详解》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、outline在一个声明中设置所有的轮廓属性。outline-color设置轮廓的颜色。outline-style设置轮廓的样式。outline-width设置轮廓的宽度。border-radius定义和描述•border-radius简写属性为元素添加圆角边框，设置所有四个border-*-radius属性。•语法：border-radius:1-4length

2、%/1-4length

3、%;•按此顺序设置每个radii的四个值：如果省略bottom-left，则与top-right相同，如果省略bottom-r

4、ight，则与top-left相同，如果省略top-right，则与top-left相同。可能的取值length（定义圆角的形状）/%（以百分比定义圆角的形状）默认值0继承性no版本CSS3JavaScript语法object.style.border-radius="5px"注意border-top-left-radius属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。如果长度为零，则边角为方形，

5、而不是圆形。水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。浏览器支持性IE9+、Firefox4+、Chrome、Safari5+以及Opera支持border-radius属性。border-top-left-radius属性border-top-left-radius属性定义左上角边框的形状。语法：border-bottom-right-radius:length

6、%[length

7、%];值描述length定义左下角的形状。%以百分比值定义左下角的形状。border-top-rig

8、ht-radius属性border-top-right-radius属性定义右下角边框的形状。语法：border-top-right-radius:length

9、%[length

10、%];值描述length定义右上角的形状。%以百分比值定义右上角的形状。一、语法：复制代码代码如下:border-radius：none

11、{1,4}[/{1,4}]? 二、取值：：由浮点数字和单位标识符组成的长度值。不可为负值。三、说明：border-radius是一种缩写方法。如果“/”

12、前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：1、border-radius:[{1,4}];//这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等2、border-radius:[{1,4}] [

13、ngth>{1,4}];//这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值3、border-radius:[{1,4}] [{1,4}] [{1,4}];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right4、border-radius:[{1,4

14、}] [{1,4}] [{1,4}] [{1,4}];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left前面，我们主要看了border-radius的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：复制代码代码如下:border-top-left-r

15、adius://左上角border-top-right-radius://右上角border-bottom-right-radius://右下角border-bottom-left-radius://左下角这里说一下，各角拆分出来取值方式：