1、首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：
2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：
3、最后打开浏览器，就可以看到圆角边框了：
上面这位兄台你的回答是COPY的吧，没有讲到重点不说，洋洋散散那么多字都是多余的，我给你写一句简单的代码。CSS代码：
<style>
#myDiv {
border-radius: 4px /*这句就是重点，让边框变为圆角*/
border: 1px solid #CCC/*让边框变为1px宽度，直线，#CCC颜色*/
width: 500px
height: 500px
}
</sytle>
HTML代码：
<div id="myDiv">这是圆角矩形</div>
就是这么简单，你COPY过去就OK了。
另外说一句，这个圆角的属性是CSS3中的特性，在IE9以下以及非webkit和moz内核的浏览器下都是不行的（比如IE8、IE7、IE6），这些浏览器就只能使用图片达到圆角效果了。
纯手工制造，希望对你有帮助，有任何疑问可以继续追问。
在HTML中把块的边框做成圆角需要利用css的border-radius属性。
*** 作步骤：
1、打开Adobe Dreamweaver CC 2015。
2、执行菜单栏中的"文件的新建"命令或按住Ctrl+N键打开"新建文档"对话框，选择其文档类型为HTML，单击"创建"按钮，即创建一个网页文档。
3、在<body>和</body>之间添加"<form></form>"，如下图所示。表单使用的<form>标记是成对出现的，在首标记<form>和尾标记</form>之间的部分就是一个表单。
4、在<form>和</form>之间添加"<input name="text" type="submit" value="登录" class="input_box">"，如下图所示。
5、在<head>和</head>之间添加"<style type="text/css"></style>"，如下图所示。
6、在<style type="text/css">和</style>之间添加".input_box{width:360pxheight:40pxborder-radius:20pxborder-style:nonebackground:#ec6941font-size:14pxcolor:rgba(249,248,248,1.00)}"，如下图所示。
7、保存网页文件，按住F12键可以在浏览器中预览效果，如下图所示。
语法说明
输入<input>是个单标记，必须嵌套在表单标记中使用，用于定义一个用户的输入项。
name属性：输入字段的识别名称，传递数据时的参数名称。
type属性：输入字段的类型。button是表单通用按钮。
value属性：表单字段预设数据值。例如用于button、submit、reset等字段类型指的是按钮标签的显示文字。
class属性：对应于网页中的CSS选择器名称。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）