css如何实现圆角边框

圆角边框属性是css3新增的属性,在圆角边框属性出现之前想要实现圆角边框都是用图片做背景实现的,现在有了圆角边框属性实现圆角效果就简单多了。
  1、圆角边框属性 :border-radius:可以为元素添加圆角边框,他可以一个值对四个角设置,也可以分别给每个角设置
   先设置一个高和宽为200背景为红色的容器 
   在这里插入图片描述  
    
   (1)设置一个值 四个角都是相同的
   实现方法:
   在这里插入图片描述
   
   效果如图:
   
   
   
   在这里插入图片描述
   
   (2)设置两个值 //两个值设置的分别是左上和右下、左下和右上
   实现方法:
   在这里插入图片描述
   
   效果如图:
   在这里插入图片描述

(3)设置四个值 //左上 右上 右下 左下 (顺时针顺序)
   实现方法:
   
   在这里插入图片描述
   效果如图:
   在这里插入图片描述
   
   2、利用圆角边框还可以实现圆形和半圆效果
   (1)圆形
   实现方法:可以写成百分之五十,这样长和宽改变,也还是可以形成圆形
   
   在这里插入图片描述
   效果:
   在这里插入图片描述
   
   (2)半圆
   实现方法:先做成一个圆形,然后把右下和左下的角度改为0,然后在把高度减去一半就可以形成半圆
   
   在这里插入图片描述
    效果:
   在这里插入图片描述
逆战班总结:利用圆角边框属性可以实现很多效果,但是需要注意的是如果给每个角分别加角度的话,要弄清楚顺序,不要搞混了。

  • 8
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值