在Dreamweaver中利用div绘制带有圆角矩形边框的

在Dreamweaver中利用div绘制带有圆角矩

形边框的单选按钮组

最近很多朋友询问关于使用Dreamweaver进行表单制作过程中，如何让表单项在一个圆角的容器内，使整个页面看起来更加美观。今天就以单选按钮组为例，我们一起来试一下。

操作步骤：

1.打开Dreamweaver CS6，新建一个网页文件，并保存一下。

2.在页面中，使用“插入”>“表单”>“表单”命令。

3.将插入点定位到表单内，输入文字“1.您的性别？”，然后敲击键盘上的“Enter”键，另起一段。

4. 使用“插入”>“布局对象”>“Div标签”命令。

5.在ID文本框中输入这个div标签的ID名称“xb”，然后单击“确定”按钮。

此时在会在表单内出现一个黑色的虚线框。

6.将黑色虚线框中的文字删除后，使用“插入”>“表单”>“单选按钮组”命令。在弹出的对话框中做如下图所示的参数修改。

页面效果如下图所示：

相关代码如下图所示：

7.在代码视图中，将上图所示代码中第一个换行标签
，修改为水平线标签

---

，然后删除第二个
标签。效果如下图所示。

8.在代码视图中标签前输入如下所示的内容，带有/* */的注释文字部分可以不写。圆角的关键就是border-radius属性。

注意：IE9+、Firefox 4+、Chrome、Safari 5+ 以及Opera 支持border-radius 属性。#xb {

border: 1px solid #999;

border-radius:10px;/*控制当前div的圆角半径*/

padding:10px;/*控制内部填充边距*/

background-color:rgba( 240,165,119,0.1); /*控制背景颜色透明度*/

}

9.页面效果如下图所示，此时还看不到圆角存在，不要着急啊。

10.现在请打开“实时视图”按钮，则可以看到圆角了。