html边框圆角化代码

html边框圆角化代码,第1张

html边框圆角化可以用css中的“border-radius”属性来实现。

1、新建html文档,在body标签中添加一个div标签,然后为这个div标签设置边框,这时默认情况下边框是直角:

2、为div标签设置“border-radius”属性,属性值为圆角半径大小,这时边框的四个顶角都会变成圆角:

3、为div标签设置“border-radius”属性,属性值分别对应边框的左上角、右上角、右下角和左下角,这时可以对每个顶角自定义设置圆角半径:

html设置table的边框的方法是使用border 属性实现。

说明:

border 属性规定表格单元周围是否显示边框。

值 "1" 指示应该显示边框,且表格不用于布局目的。

在 HTML5 中,border 属性仅用于指示表格是否用于布局目的,且只允许属性值 "" 或 "1"。

完整用法举例:

1、html中的table代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>table的边框</title>

</head>

<body>

<table border="1">

<tr>

  <th>Month</th>

  <th>Savings</th>

</tr>

<tr>

  <td>January</td>

  <td>$100</td>

</tr>

<tr>

  <td>February</td>

  <td>$80</td>

</tr>

</table>

</body>

</html>

2、运行后的效果:

在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选择器名称。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7075135.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存