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

在Dreamweaver中利用div绘制带有圆角矩形边框的单选按钮组最近很多朋友询问关于使用Dreamweaver进行表单制作过程中，如何让表单项在一个圆角的容器内，使整个页面看起来更加美观。今天就以单选按钮组为例，我们一起来试一下。操作步骤：1.打开Dreamweaver CS6，新建一个网页文件，并保存一下。2.在页面中，使用“插入”“表单”“表单”命令。3.将插入点定位到表单内，输入文字“1.您的性别？”，然后敲击键盘上的“Enter”键，另起一段。4. 使用“插入”“布局对象”“Div标签”命令。5.在ID文本框中输入这个div标签的ID名称“xb”，然后单击“确定”按钮。此时在会在表单内出现一个黑色的虚线框。6.将黑色虚线框中的文字删除后，使用“插入”“表单”“单选按钮组”命令。在弹出的对话框中做如下图所示的参数修改。页面效果如下图所示：相关代码如下图所示：7.在代码视图中，将上图所示代码中第一个换行标签br /，修改为水平线标签hr /，然后删除第二个br /标签。效果如下图所示。8.在代码视图中/head标签前输入如下所示的内容，带有/* */的注释文字部分可以不写。圆角的关键就是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.现在请打开“实时视图”按钮，则可以看到圆角了。