如何使用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如何为元素绑定多个事件
  • 摩尔庄园中如何购买圆形青石砖
  • 热门搜索
    绿色校园手抄报内容 美丽的校园手抄报 建队节手抄报 关于法治的手抄报 关于西游记的手抄报 清明节文明祭祀手抄报 植物手抄报 保护环境手抄报大全 争创文明城市手抄报 开学手抄报简单又好画