如何利用CSS3属性设置同样半径展示不同形状图形

2025-06-20 23:26:50

1、第一步，双击打开HBuilder编辑工具，新建静态页面borderRadius.html，如下图所示：

2、第二步，在<body></body>中插入五个div标签元素，分别设置ID属性值，如下图所示：

3、第三步，分别设置这五个div标签元素的宽度、高度和背景色，这三个属性有所不同，如下图所示：

4、第四步，保存代码并预览该静态页面，这时会看到不同宽度和高度的矩形图形，如下图所示：

5、第五步，在每个div标签添加属性border-radius，都是设置为100px 100px 100px 100px，如下图所示：

6、第六步，虽说半径设置的都一样，但是图形展示的形状都不一致，说明宽度和高度影响border-radius属性，如下图所示：

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。