您现在的位置是:首页 > web开发 > CSS3圆角边框

CSS3圆角边框

web开发作者:dayu日期:6天前点击:2

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

3.制作单个圆角边框

border-radius:30px 0 0 0;

4.特殊应用:

  1. border-radius:内半径=外半径-边框宽度!内半径为两者的差值,差值越大,圆角幅度也越大,反之圆角幅度越小。当border边宽越大时候,内圆角接近于直角,不具有圆角效果。
  2. 不同宽度的相邻边,内角会从宽的边平滑过渡到窄的一边,其中一条边可以为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?…

CSS3圆角边框

原文地址:http://www.cnblogs.com/ganchuanpu/p/7221064.html


下一篇       上一篇