CSS3圆角边框 - ganchuanpu_H5之家 - 中国HTML5教程资源分享第一站

border-radius属性的使用方法：

1.水平和垂直半径一样：

2.单独设置水平和垂直半径：用”/”来区别：水平半径/垂直半径

.border-radius{ width:350px;height:100px; border:10px solid orange; border-radius:60px 40px 30px 20px/30px 20px 10px 5px; }

效果图：

这里写图片描述

注意：分开设置元素各个顶角的圆角的水平和垂直半径圆角效果时，是不需要’/’的，加上反而是错误的！！！

3.制作单个圆角边框

border-radius:30px 0 0 0;

4.特殊应用：

border-radius：内半径=外半径-边框宽度！内半径为两者的差值，差值越大，圆角幅度也越大，反之圆角幅度越小。当border边宽越大时候，内圆角接近于直角，不具有圆角效果。

不同宽度的相邻边，内角会从宽的边平滑过渡到窄的一边，其中一条边可以为0，相邻转角由大向小转。

//内半径=外半径-边宽，边宽过大则内圆角为直角 .border-radius2{ width:350px;height:100px; border:30px solid orange; border-radius:25px; } //不同宽边的平滑过渡效果 .border-radius3{ width:350px;height:100px; border:3px solid red; border-width: 20px 5px 30px 60px; border-radius:100px; }

特殊圆形的制作：

1.圆形：

制作技巧：元素的宽度和高度相同，圆角半径为宽或高的一半或直接设置50%！

.round{ width:100px;height:100px; background:red; border-radius:50%; }

2.半圆：

制作技巧：元素的宽度和高度相配合（多为2倍关系），圆角半径为短边的值，圆角半径设置位置不同。分上、右、下、左半圆

//上半圆 .halfCircle{ width:200px;height:100px; background-color: blue; border-radius:100px 100px 0 0 ; } //右半圆 .halfCircle2{ width:100px;height:200px; background-color: blue; border-radius:0 100px 100px 0 ; } //...

3.扇形：

制作技巧：其实就是制作四分之一圆，遵循”三同，一不同“原则，宽度，高度，圆角半径相同，圆角位置不同。分为左上、右上、右下、左下。

.quarterCircle{ width:100px;height: 100px; background: orange; border-radius: 100px 0 0 0;/*圆角位置不同*/ }

4.椭圆：

制作技巧：设置水平和垂直半径，例如水平方向的椭圆：宽度=高度x2，水平半径=宽度，垂直半径=高度！垂直方向的椭圆则相反

.hor{ width:200px;height:100px; background: green; border-radius: 200px/100px; }

可以配合元素的其他属性实现不同的图形效果，适应项目需求。border-radius浏览器兼容性较好，IE8以下不支持，but,who care about it？…