整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
习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凸边
order 盒子边框
复合属性。设置对象边框的特性。
盒子边框三要素：
① 边框粗细
② 边框样式
③ 边框颜色
语法：border: border-width | border-style | border-color ;
边框四边的粗细、样式、颜色，以及上下左右每个位置的样式属性都是可以单独调整的。
边框的颜色不是必要的，如果不指定颜色，默认颜色为黑色，但必须为盒子指定宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>使用 border-style 可为盒子边框设置样式，以下示例为实线
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
}效果：
示例 CSS 代码
如果需要设置不同方向的样式属性，可以写在一句 CSS 代码里，比如说下面这段代码，上下实线，左右虚线。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}效果：
属性值解释none无轮廓。 border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓
使用 border-width 可为盒子边框设置粗细，以下示例边框为 5px 粗细
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}效果
示例 CSS 代码
如果需要设置不同方向的边框粗细，可以写在一句 CSS 代码里。
比如说下面这段代码，上下2px，右2px，左5px。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}效果：
可直接输入
颜色的英文名称
rgb值
十六进制
使用 border-color 可为盒子边框设置颜色，以下示例边框颜色为红色。
/* CSS代码 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}效果：
示例 CSS 代码
上面有两个示例讲述如何设置不同方向的属性，border-color 也是相同使用方法，此处就不做示例了。
如果你需要同时设置盒子的粗细、样式、颜色，那么你可以将他们的样式表写在同一行代码里。
例如：
/* CSS代码 */
div{
border-top: 5px solid red;
}这段代码指定了上边框的三个属性：粗细、样式、颜色
border-top 包含了：
其他同理
先来看一个示例
/* CSS代码 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
细心的你，一定发现了 border 的边框四条边交接处是斜角。
此刻我们把盒子的宽高设置为 0
/* CSS代码 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
是不是完完全全像四个三角形一样。
我们只需要把上边和左右两边的三角形隐藏起来，它不就是一个三角形了。
为 border-color 指定 transparent 值，使盒子边框颜色变透明
/* CSS代码 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}效果：
把另外三条边透明之后，就只剩一个三角形了。
完
部分资料引用自：
这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
最具勇气的行为
仍然是独立思考
并将你的想法大声公之于世
- 2024.03.25 -
在网络设计的世界里，盒子模型是构建网页布局的基石，只有理解了盒子模型，我们才能更好的进行网页布局。
HTML中的每一个元素都可以看成是一个盒子，拥有盒子一样的外形和平面空间，它不可见、不直观，但无处不在，所以初学者很容易在这上面出问题。今天就让我们来深入了解一下盒子模型。
首先，我们来理解一下什么是CSS盒子模型。
简单来说，CSS盒子模型是CSS用来管理和布局页面上每一个元素的一种机制。每个HTML元素都可以被想象成一个矩形的盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。
这四个部分共同作用，决定了元素在页面上的最终显示效果。
一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。其中margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
下面来一一介绍盒子模型的各个组成部分：
2.1 内容（Content）
内容是盒子模型的中心，它包含了实际的文本、图片等元素。内容区域是盒子模型中唯一不可或缺的部分，其他三部分都是可选的。
内容区的尺寸由元素的宽度和高度决定，但可以通过设置box-sizing属性来改变这一行为。
下面通过代码例子来了解一下内容区：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid black;
padding: 10px;
margin: 20px;
box-sizing: content-box; /* 默认值 */
}
</style>
</head>
<body>
<div>这是一个盒子模型的例子。</div>
</body>
</html>在这个例子中，.box类定义了一个具有特定样式的<div>元素。这个元素的宽度为200px，高度为100px，背景颜色为浅蓝色。边框为2像素宽的黑色实线，内边距为10像素，外边距为20像素。
由于我们设置了box-sizing: content-box;（这是默认值），所以元素的宽度和高度仅包括内容区的尺寸。换句话说，元素的宽度是200px，高度是100px，不包括内边距、边框和外边距。
如果我们将box-sizing属性设置为border-box，则元素的宽度和高度将包括内容区、内边距和边框，但不包括外边距。这意味着元素的总宽度将是234px（200px + 2 * 10px + 2 * 2px），高度将是124px（100px + 2 * 10px + 2 * 2px）。
总之，内容区是CSS盒子模型中的一个核心概念，它表示元素的实际内容所在的区域。通过调整box-sizing属性，您可以控制元素尺寸是否包括内容区、内边距和边框。
2.2 内边距（Padding）
内边距是内容的缓冲区，它位于内容和边框之间。通过设置内边距，我们可以在内容和边框之间创建空间，让页面看起来不会太过拥挤。
内边距是内容区和边框之间的距离，会影响到整个盒子的大小。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*
1、 padding-top: ; 上内边距
padding-left:; 左内边距
padding-right:; 右内边距
padding-bottom:; 下内边距
2、padding简写 可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* padding-top:30px ;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px; */
padding: 40px;
border: 10px transparent solid;
}
.box1:hover {
border: 10px red solid;
}
/*
* 创建一个子元素box2占满box1，box2把内容区撑满了
*/
.box2 {
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>2.3 边框（Border）
边框围绕在内边距的外围，它可以是实线、虚线或者其他样式。边框用于定义内边距和外边距之间的界限，同时也起到了美化元素的作用。
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部，设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 0px;
height: 0px;
/* background-color: rgb(222, 255, 170); */
/* 边框的大小 如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样
border-width 后可跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
单独设置某一边的边框宽度
border-bottom-width
border-top-width
border-left-width
border-right-width
*/
border-width: 20px;
/* border-left-width:40px ; */
/*
边框的样式
border-style 可选值
默认值：none
实线 solid
虚线 dashed
双线 double
点状虚线 dotted
*/
border-style: solid;
/* 设置边框的颜色 默认值是黑色
border-color 也可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
对应的方式跟border-width是一样
单独设置某一边的边框颜色
border-XXX-color: ;
*/
border-color: transparent transparent red transparent ;
}
.box1{
width: 200px;
height: 200px;
background-color: turquoise;
/* 简写border
1、 同时设置边框的大小，颜色，样式，没有顺序要求
2、可以单独设置一个边框
border-top:; 设置上边框
border-right 设置右边框
border-bottom 设置下边框
border-left 设置左边框
3、去除某个边框
border:none;
*/
border: blue solid 10px;
border-bottom: none;
/* border-top:10px double green ; */
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>2.4 外边距（Margin）
外边距是元素与外界的间隔，它决定了元素与其他元素之间的距离。通过调整外边距，我们可以控制元素之间的相互位置关系，从而影响整体布局。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* 外边距 不会影响到盒子的大小
可以控制盒子的位置
margin-top:; 正值 元素向下移动 负值 元素向上移动
margin-left:; 正值 元素向右移动 负值 元素向左移动
margin-bottom:; 正值 元素自己不动，其靠下的元素向下移动，负值 元素自己不动，其靠下的元素向上移动
margin-right: ; 正值负值都不动
简写 margin 可以跟多个值
规则跟padding一样
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/* margin-top: -100px;
margin-left: -100px;
margin-bottom: -100px;
margin-right: -100px; */
margin: 40px;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。
盒子真正的宽和高按下面公式计算
我们还可以用带属性的公式表示：
上面说到的是默认情况下的计算方法，另外一种情况下，width和height属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。
box-sizing属性值
content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。
border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。
inherit：规定应从父元素继承box-sizing属性的值
想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想
掌握了盒子模型的基本概念后，我们就可以开始创造性地应用它来设计网页。以下是一些技巧：
CSS盒子模型是前端开发的精髓之一，它不仅帮助我们理解和控制页面布局，还为我们提供了无限的创意空间。现在，你已经掌握了盒子模型的奥秘，是时候在你的项目中运用这些知识，创造出令人惊叹的网页设计了。
记住，每一个细节都可能是打造卓越用户体验的关键。开启你的CSS盒子模型之旅，让我们一起构建更加精彩、更加互动的网页世界！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
*请认真填写需求信息，我们会在24小时内与您取得联系。
