如何使用CSS3中的属性绘制四分之一的圆形图

 时间:2024-10-12 00:34:14

1、第一步,双击打开HBuilder前端开发工具,新建静态页面four.html,如下图所示:

如何使用CSS3中的属性绘制四分之一的圆形图

2、第二步,在<body></body>元素内插入四个div元素,分别捂执涡扔使用one、two、three和four作为div的id,如下图所示:

如何使用CSS3中的属性绘制四分之一的圆形图

3、第三步,编写第一个div标签样式,设置宽度和高度都为200px,border-radius为200px 0 0 0;如下图所示:

如何使用CSS3中的属性绘制四分之一的圆形图

4、第四步,保存代码预览该静态页面,这时生成一个四分之一的圆形,如下图所示:

如何使用CSS3中的属性绘制四分之一的圆形图

5、第五步,再次编写第二个div样式属性,跟第一个不一样的地方是border-radius和背景色,如下图所示:

如何使用CSS3中的属性绘制四分之一的圆形图如何使用CSS3中的属性绘制四分之一的圆形图

6、第六步,将剩下的两个div元素样式设置,分别使用不同的border-radius和背景色,如下图所示:

如何使用CSS3中的属性绘制四分之一的圆形图
  • 在VScode中如何设置水平滚动条自动可见
  • jquery实现点击按钮控制多个div的显示和隐藏
  • 最强蜗牛超级模因宝箱碎片怎么得
  • jquery如何为元素绑定多个事件
  • 摩尔庄园中如何购买圆形青石砖
  • 热门搜索
    英语手抄报图片简单又漂亮 预防新型冠状病毒手抄报 亲子共读手抄报 有关春节的手抄报 竖版手抄报 文明健康有你有我手抄报 我的中国梦手抄报内容 歌颂祖国手抄报 新型冠状病毒手抄报 抗击疫情手抄报内容