如何使用CSS3属性制作上下左右方向的半圆形

 时间:2026-04-21 20:36:04

1、第一步,打开HBuilder编辑工具,新建静态页面half.html,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

2、第二步,在<body></body>元素内插入四个div元素,分别设置它们的id为left、right、top和bottom,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

3、第三步,在<style></style>内编写div的id为left样式,宽度为200px、高度为400px、圆角半径为200px 0 0 200px,背景色为红色,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

4、第四步,保存静态页面,在浏览器中预览页面效果,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

5、第五步,接着编辑右边的半圆形,设置宽度为200px,高度为400px,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

如何使用CSS3属性制作上下左右方向的半圆形

6、第六步,最后设置半圆形方向为上和下的样式,这时宽度为400px,高度为200px,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

  • 阿里鲁班智能设计平台怎么用
  • 亲密付怎么用
  • 创世纪如何退出战斗
  • 闲鱼如何查找尺码小助手?
  • Photoshop设计【人民的名义】艺术字
  • 热门搜索
    春节手抄报 简单 病毒手抄报内容写什么 国庆节英语手抄报 重阳节手抄报简单易画 防溺水手抄报简单好画图片 爱护牙齿手抄报 过年的手抄报 关于廉洁的手抄报 手抄报图片大全3年级 爱祖国爱家乡手抄报