CSS3中的border-radius属性用于设置元素的圆角效果，这个属性可以是none，代表元素没有圆角；也可以是一到四个值，如果是四个值，代表方向为上右下左。下面利用这个属性制作四个半圆形，它们的朝向方向都不一样，操作如下：工具/原料moreCSS3HBuilderHTML5截图工具方法/步骤1/6分步阅读

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

2/6

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

3/6

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

4/6

第四步，保存静态页面，在浏览器中预览页面效果，如下图所示：

5/6

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

6/6

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

注意事项

注意border-radius属性的用法

注意border-radius属性的兼容性

CSS3HTML5BORDER-RADIUS半圆形