免费教程
Web前端基础教程:CSS 如何实现圆角边框 接触过 Web前端教程的,都知道 CSS3 在 CSS 2的基础上新增了很多属性,比如圆角、阴影等各种特效。 在以前要做一个圆角边框,都没有办法通过代
Web前端教程
Web前端基础教程:CSS 如何实现圆角边框
来源:易牛云朗沃
  |  
发布时间:2021-08-23 13:42
  |  
关键词:Web前端开发、CSS圆角边框
  |  
阅读量:
接触过 成都Web前端教程的,都知道 CSS在 CSS 2的基础上新增了很多属性,比如圆角、阴影等各种特效。
 
在以前要做一个圆角边框,都没有办法通过代码实现,都只能通过背景图片来实现,而在 CSS中,新增了圆角边框就可以很轻松的通过代码实现了
 
圆角边框属性 :border-radius:可以为元素添加圆角边框,他可以一个值对四个角设置,也可以分别给每个角设置,后面可以跟四个值。
 
border-radius:1-4 length;
 
我们需要先通过 HTML 设置一个高和宽为200背景为红色的容器,然后在通过 CSS 来控制圆角。
 
 
 Web前端基础教程:CSS 如何实现圆角边框    
    

(1)设置一个值

 
四个角都是相同的,添加以下 HTML 代码就可以实现。
 
border-radius:50px;
   
效果如图:
   
 Web前端基础教程:CSS 如何实现圆角边框  
   
   

(2)设置两个值 

 
两个值设置的分别是左上和右下、左下和右上
 
border-radius:50px 40px;
      
效果如图:

 
Web前端基础教程:CSS 如何实现圆角边框
 

(3)设置三个值 

 
三个值设置的分别是左上、左下和右上、右下
 
border-radius:50px 40px 80px;
      
效果如图:
 
 
Web前端基础教程:CSS 如何实现圆角边框
 

(4)设置四个值

 
三个值设置的分别是左上、右上、右下、左下 (顺时针顺序)
 
border-radius:50px 40px 30px 60px;
      
效果如图:
 
Web前端基础教程:CSS 如何实现圆角边框
 
 
 
 
   
2、利用圆角边框还可以实现圆形和半圆效果
 

(1)圆形

 
实现方法:可以写成百分之五十,这样长和宽改变,也还是可以形成圆形
 
 
border-radius:100px;
border-radius:50%;  
 
这两种方法都可以实现。
 
 
效果:
Web前端基础教程:CSS 如何实现圆角边框 
   

(2)半圆

 
实现方法:先做成一个圆形,然后把右下和左下的角度改为0,然后在把高度减去一半就可以形成半圆
 
width:200px;
height:100px;
backgroud-color:red;
border-radius:100px 100px 0px 0px;
  
效果:
Web前端基础教程:CSS 如何实现圆角边框
 
需要注意的是:
百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半
目前,ie9+支持border-radius属性,Firefox、Chrome、Safari支持所有新的边框属性
 
要想让网页变得更美观,就可以多使用 CSS ,而圆角边框也是 CSS3 中比较重要的一个属性,在成都Web前端中,可以借助 HTML 编写一个页面,可以自己尝试完成一个页面,也可以去易牛云朗沃去一下以下前端的课程。