css3文本圆边框,CSS3圆角边框(示例代码)

border-radius属性的使用方法：

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

border-radius只设置一个值：四个圆角相同

border-radius设置两个值：斜对角相同

border-radius设置三个值：top-right和bottom-left相同

border-radius设置四个值：各自取值

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？…