整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
习HTML时有时候我们需要用代码设置边框或虚线边框的样式，那该怎么设置呢？下面上海非凡进修学院HTML5开发培训机构大咖分享下html虚线边框设置教程，会对几个不同标签加虚线边框效果样式，同学们可以根据示例灵活掌握与应用到自己DIV+CSS布局中。
为了对html不同标签加边框虚线，我们选择几个常用标签对齐设置边框虚线效果。
1、html常用标签
div标签
span
ul li
table tr td
2、实例用到CSS属性单词
border
width
height
3、实现虚线的CSS重点介绍
border为边框属性，如果要实现对象边框效果，要设置边框宽度、边框颜色、边框样式（实线还是虚线）
border:1px dashed #F00 这个就是设置边框样式宽度为1px，虚线，虚线为红色。
4、实例描述
我们对以上几个标签设置相同宽度、相同高度、边框效果。
5、HTML代码示例：
以上示例对html中不同标签设置相同的样式，包括相同边框虚线。
上海HTML5开发培训机构大咖提示边框三个样式
通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。
1）、边框颜色：border-color:#000
2）、边框厚度（宽度）：border-width:1px
使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。
3）、border边框样式：border-style:solid
上海HTML5开发培训机构大咖提示：边框border样式值如下：
none :无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid :实线边框（常用）
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge :根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
人可能会疑惑，我为什么专门用一节内容来说边框和圆角。其实，不为别的，只为它们在开发中，在Web系统中，在手机页面中，太常用了。有边框的页面，让人耳目一新，一目了然；有圆角的内容，让人赏心悦目，心旷神怡。说的有点夸张了，就这么着吧。
边框(border)一般为长方形形状，有上下左右四条边，CSS边框属性允许你指定一个元素边框的样式和颜色。CSS的圆角(border-radius)方法，可给任何元素制作 "圆角"效果。
在CSS中，你可以通过border和其延伸的，如border-style，来实现边框的效果。上边框相关的有border-top-style样式、border-top-color颜色、border-top-width宽度和组合了它们的border-top。下、左右边框类似，换成对应的单词即可。
边框样式(border-style)常用的有dotted(点线)、dashed(虚线)、solid(实线)、double(双边框)这四种，不常用的有groove(3D沟槽)、ridge(3D脊边)、inset(3D嵌入)和outset(3D突出)。
/* --------在样式表文件中---------- */
/*4条边框一起设置*/
.four-border {
width: 800px;
border: 2px solid darkgreen;;
}
/*四条边框可个性化*/
.four-style {
width: 800px;
/* 上、右、下、左*/
border-width: 1px 2px 3px 4px;
/*上、右左、下*/
border-style: solid dashed double;
/*上下和右左*/
border-color: darkgreen coral;
}
/*单条边框设置*/
.one-style {
width: 800px;
border-top: 1px groove orangered;
border-bottom-width: 5px;
border-bottom-style: inset;
border-bottom-color: darkgreen;
}HTML文件内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框逼格</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
border统一设置四条边框<br/>
顺序为：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
四条边框一起设置，风格可不同<br/>
顺序为:上、右、下、左。<br/>
1. 只有一个值(如：border-width:2px)：表示4条边框全部一样；<br/>
2. 有两个值(如：border-width:2px 3px)：表示上下和右左;<br/>
3. 有三个值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
4. 有四个值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
单独一天边框进行设置<br/>
border-top：顶部宽度、样式、颜色，一起设置<br/>
border-top-width:上边框宽度；<br/>
border-top-style:上边框样式；<br/>
border-top-color:上边框颜色。
<br/>
</div>
</body>
</html>输出结果
使用CSS的border-radius 属性，你可以给任何元素制作 "圆角"。 border-radius统一指定4个圆角，顺序为左上、右上、右下和左下。如果要特定指定某个角的话，用border-top-left-radius等方式即可。
在样式表ys2.css文中的内容
/*4个角统一指定*/
.four-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-radius: 15px;
vertical-align: middle;
text-align: center;
}
/*单独指定一个角*/
.one-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-top-left-radius: 15px;
border-bottom-right-radius: 50px;
vertical-align: middle;
text-align: center;
}在HTML文件中的内容
<br/><br/>
<div class="four-radius">
统一设置4个圆角<br/>
一个值： 四个圆角值相同;<br/>
两个值: 左上角与右下角，右上角与左下角;<br/>
三个值: 左上角, 右上角和左下角，右下角;<br/>
四个值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
单独指定某个角<br/>
border-top-left-radius：左上角;<br/>
border-top-right-radius：右上角;<br/>
border-bottom-right-radius：右下角;<br/>
border-bottom-left-radius：左下角。
</div>输出结果
不要重复造轮子，所以好多程序员一遇到问题，就喜欢搜索，我也是，哈哈哈~。CSS有指定边框的属性，也有圆角的属性，将其放在一起，是不是就可以实现圆角边框?答案毋庸置疑，答案是肯定的。
在样式表ys2.css文件中的内容
/*圆角边框*/
.corners {
border-radius: 50px;
border: 3px solid #8AC007;
padding: 50px;
width: 720px;
line-height: 50px;
vertical-align: middle;
text-align: center;
}在HTML文件中的内容
<div class="corners">
边框属性和圆角属性，组合成圆角边框
</div>输出结果
好了，有关CSS的圆角边框内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##CSS##程序员##Web#
TML5 为前端开发者带来了许多表单增强功能，这些功能使得创建交互式和用户友好的表单变得更加容易。在本文中，我们将介绍几种 HTML5 新增的表单功能，并提供完整的 HTML 示例，以帮助你了解如何在实际项目中应用这些功能。
HTML5 引入了一系列新的 input 类型，以支持更多种类的数据输入，比如电子邮件、日期等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>电子邮件和网址输入示例</title>
<style>
body {
font-family: Arial, sans-serif; /* 设置字体 */
padding: 20px; /* 页面内边距 */
}
form {
max-width: 400px; /* 表单最大宽度 */
margin: 0 auto; /* 居中显示 */
padding: 20px; /* 表单内边距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 5px; /* 边框圆角 */
background-color: #f9f9f9; /* 背景颜色 */
}
label {
display: block; /* 使标签独占一行 */
margin-bottom: 5px; /* 标签下方间距 */
font-weight: bold; /* 字体加粗 */
}
input[type="email"],
input[type="url"] {
width: 100%; /* 输入框宽度 */
padding: 8px; /* 内边距 */
margin-bottom: 20px; /* 与下一个元素的间距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 4px; /* 边框圆角 */
}
input[type="submit"] {
background-color: #007bff; /* 背景颜色 */
color: white; /* 字体颜色 */
padding: 10px 20px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 4px; /* 边框圆角 */
cursor: pointer; /* 鼠标样式 */
font-size: 16px; /* 字体大小 */
}
input[type="submit"]:hover {
background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}
</style>
</head>
<body>
<form>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<label for="url">个人网站:</label>
<input type="url" id="url" name="url">
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中，我们使用了 type="email" 和 type="url" 来要求用户输入有效的电子邮件地址和网址。如果用户输入的不符合格式，浏览器会在提交表单前显示一个警告。
placeholder 属性允许我们在输入字段中设置一个提示文本，当输入字段为空时显示，一旦开始输入，提示文本就会消失。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带占位符的输入框示例</title>
<style>
body {
font-family: Arial, sans-serif; /* 设置字体 */
padding: 20px; /* 页面内边距 */
}
form {
max-width: 300px; /* 表单最大宽度 */
margin: 0 auto; /* 居中显示 */
padding: 20px; /* 表单内边距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 5px; /* 边框圆角 */
background-color: #f9f9f9; /* 背景颜色 */
}
label {
display: block; /* 使标签独占一行 */
margin-bottom: 10px; /* 标签下方间距 */
font-weight: bold; /* 字体加粗 */
}
input[type="search"] {
width: calc(100% - 22px); /* 输入框宽度，减去内边距和边框的宽度 */
padding: 10px; /* 内边距 */
margin-bottom: 20px; /* 与下一个元素的间距 */
border: 1px solid #ccc; /* 边框样式 */
border-radius: 4px; /* 边框圆角 */
box-sizing: border-box; /* 盒子模型，使宽度包含边框和内边距 */
}
input[type="submit"] {
background-color: #007bff; /* 背景颜色 */
color: white; /* 字体颜色 */
padding: 10px 20px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 4px; /* 边框圆角 */
cursor: pointer; /* 鼠标样式 */
font-size: 16px; /* 字体大小 */
}
input[type="submit"]:hover {
background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}
</style>
</head>
<body>
<form>
<label for="search">搜索:</label>
<input type="search" id="search" name="search" placeholder="请输入搜索关键字">
<input type="submit" value="搜索">
</form>
</body>
</html>
这里的 placeholder="请输入搜索关键字" 就是一个占位符，它会在用户输入之前显示在搜索框中。
autofocus 属性可以让页面加载时自动将焦点放到某个表单元素上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自动聚焦的输入框示例</title>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" autofocus>
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中，当页面加载完成后，姓名输入框将自动获得焦点。
HTML5 为表单验证提供了内置支持，通过简单的属性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情况下进行基本的验证。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单验证示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #333;
}
input[type="number"],
input[type="text"] {
width: 100%;
padding: 8px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 包括边框和内边距在内的宽度 */
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
</style>
</head>
<body>
<form>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<label for="zipcode">邮编:</label>
<input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="请输入5位数字的邮编" required>
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中，年龄字段要求用户输入一个介于 18 到 99 之间的数字，而邮编字段要求用户输入一个符合特定模式（5位数字）的文本。
HTML5 的表单增强功能大大简化了表单处理和验证的工作，使得开发更加高效，同时也提高了用户体验。通过上述示例，我们可以看到，利用 HTML5 的新特性，可以创建功能强大且易于使用的表单。随着技术的不断进步，我们作为开发者应该不断学习和实践，以便更好地利用这些新工具来构建更好的网页。
*请认真填写需求信息，我们会在24小时内与您取得联系。
