0
点赞
收藏
分享

微信扫一扫

CSS--圆角边框

彭维盛 2022-12-26 阅读 148


单独对四个角进行设置:

boder-top-left-radius:30px; //左上角

boder-top-right-radius:30px; //右上角

boder-bottom-left-radius:30px; //右下角

boder-bottom-right-radius:30px; //左下角

如果这四个弧度的圆角相同,可以写成:

border-radius:30px

注:百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半

浏览器显示如下:

CSS--圆角边框_html

半圆

  • 下半圆直接将100和0互换位置
  • 其他方向的圆四个位置互换即可

CSS--圆角边框_圆角_02

浏览器显示如下:

CSS--圆角边框_圆角_03

扇形

CSS--圆角边框_圆角_04

浏览器显示如下:

CSS--圆角边框_html_05

如果有想要交流的内容欢迎在评论区进行留言,如果这篇文档受到了您的喜欢那就留下你点赞、收藏脚印支持一下博主~

举报

相关推荐

0 条评论