首页 > 代码库 > CSS3圆角边框

CSS3圆角边框

2024-11-02 22:08:01   209人阅读

border-radius属性的使用方法：

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

  1. border-radius只设置一个值：四个圆角相同
  2. border-radius设置两个值：斜对角相同
  3. border-radius设置三个值：top-right和bottom-left相同
  4. 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.特殊应用：

  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圆角边框


联系
我们