正文
html5边框圆角,HTML边框圆角
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html5中button怎么把边框怎么弄成圆角？
在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:360px; height:40px; border-radius:20px; border-style:none; background:#ec6941;font-size:14px; color:rgba(249,248,248,1.00);}"，如下图所示。
7、保存网页文件，按住F12键可以在浏览器中预览效果，如下图所示。
语法说明
输入input是个单标记，必须嵌套在表单标记中使用，用于定义一个用户的输入项。
name属性：输入字段的识别名称，传递数据时的参数名称。
type属性：输入字段的类型。button是表单通用按钮。
value属性：表单字段预设数据值。例如用于button、submit、reset等字段类型指的是按钮标签的显示文字。
class属性：对应于网页中的CSS选择器名称。
相关问答
Q1: 萌新HTML5中这种圆圈在代码应该在哪？里面的字在哪改
利用css的圆角边框即可实现：
div style="width:100px; height:100px; text-align:center; line-height:100px; border:1px solid #fff; border-radius:50%; background-color:rgba(90,90,90,0.5); color:#fff"000/div
Q2: html文本框怎么用css变圆角
border-radius属性可以实现元素的圆角。如下css可以实现文本框（单行、多行）的圆角：
input[type=text],textarea{border-radius:3px;border:1px solid #000;}
border-radius用法如下：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
该属性允许为元素添加圆角边框
语法：
border-radius: 1-4 length|% / 1-4 length|%;
按此顺序设置每个 radius 的四个值。
如果省略 bottom-left，则与 top-right 相同。
如果省略 bottom-right，则与 top-left 相同。
如果省略 top-right，则与 top-left 相同。
单位一般用px和百分比较多，其他单位也可
Q3: html5圆角边框三个参数代表哪个角
圆角一共有四个参数，分别是左上、右上、右下、左下。
如果只设定一个参数，那么四个角都用这一个参数；
如果只设定3个参数，那么第四个参数和第二个参数一样，即：左上和右下一样，右上和左下一样，类似padding和margin的四个参数。
Q4: 怎样利用css样式为html元素设置圆角框
用css样式为html元素设置圆角框是利用border-radius属性实现的。
1、html代码：
!DOCTYPE html
html
head
style
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
/style
/head
body
divborder-radius 属性允许您向元素添加圆角。/div
/body
/html
2、css代码：
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
3、实现效果：
