整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
习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凸边
天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：
这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码：
div {
border-radius: 25px;
border: 2px dashed #aaa;
}但是，原生的 dashed 有一个问题，就是我们无法控制虚线的单段长度与间隙。
假设，我们要这么一个效果呢虚线效果呢：
此时，由于无法控制 border: 2px dashed #aaa 产生的虚线的单段长度与线段之间的间隙，border 方案就不再适用了。
那么，在 CSS 中，我们还有其它方式能够实现带圆角，且虚线的单段长度与线段之间间隙可控的方式吗？
本文，我们就一起探讨探讨。
上面的场景，使用 CSS 实现起来比较麻烦的地方在于，图形有一个 border-radius。
如果不带圆角，我们可以使用渐变，很容易的模拟虚线效果。
我们可以使用线性渐变，轻松的模拟虚线的效果：
div {
width: 150px;
height: 100px;
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
background-size: 4px 1px;
background-position: 0 0;
}看看，使用渐变模拟的虚线如下：
解释一下上面的代码：
因此，我们只需要修改 background 的参数，就可以得到各种不一样的虚线效果：
完整的代码，你可以戳这里：CodePen Demo -- Linear-gradient Dashed Effect
并且，渐变是支持多重渐变的，因此，我们把容器的 4 个边都用渐变表示即可：
div {
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}效果如下：
但是，如果要求的元素带 border-radius 圆角，这个方法就不好使了，整个效果就会穿帮。
因此，在有圆角的情况下，我们就需要另辟蹊径。
当然，本质上我们还是需要借助渐变效果，只是，我们需要转换一下思路。
譬如，我们可以使用角向渐变。
假设，我们有这么一个带圆角的元素：
<div></div>div {
width: 300px;
height: 200px;
background: #eee;
border-radius: 20px;
}效果如下：
如果我们修改内部的 background: #eee，把它替换成重复角向渐变的这么一个图形：
div {
//...
- background: #eee;
+ background: repeating-conic-gradient(#000, #000 3deg, transparent 3deg, transparent 6deg);
}解释一下，这段代码创建了一个重复的角向渐变背景，从黑色（#000）开始，每 3deg 变为透明，然后再从透明到黑色，以此循环重复。
此时，这样的背景效果可用于创建一种渐变黑色到透明的重复纹理效果：
在这个基础上，我们只需要给这个图形上层，再利用伪元素，叠加一层颜色，就得到了我们想要的边框效果，并且，边框间隙和大小可以简单调整。
完整的代码：
div {
position: relative;
width: 300px;
height: 200px;
border-radius: 20px;
background: repeating-conic-gradient(#000, #000 3deg, transparent 3deg, transparent 6deg);
&::before {
content: "";
position: absolute;
inset: 1px;
background: #eee;
border-radius: 20px;
}
}效果如下：
乍一看，效果还不错。但是如果仔细观察，会发现有一个致命问题：虚线线段的每一截长度不一致。
只有当图形的高宽一致时，线段长度才会一致。高宽比越远离 1，差异则越大：
完整的代码，你可以戳这里：CodePen Demo -- BorderRadius Dashed Border
那有没有办法让虚线长度能够保持一样呢？
可以！我们再换一种渐变，我们改造一下底下的角向渐变，重新利用重复线性渐变：
div {
border-radius: 20px;
background:
repeating-linear-gradient(
-45deg,
#000 0,
#000 7px,
transparent 7px,
transparent 10px
);
}此时，我们能得到这样一个斜 45° 的重复线性渐变图形：
与上面方法一类似，再通过在这个图形的基础上，在元素中心，叠加多一层纯色遮罩图形，只漏出最外围一圈的图形，带圆角的虚线边框就实现了：
此方法比上面第一种渐变方法更好之处在于，虚线每一条线段的长度是固定的！是不是非常的巧妙？
完整的代码，你可以戳这里：CodePen Demo -- BorderRadius Dashed Border
当然，上面使用 CSS 实现带圆角的虚线边框，还是需要一定的 CSS 功底。
并且，不管是哪个方法，都存在一定的瑕疵。譬如如果希望边框中间不是背景色，而是镂空的，上述两种 CSS 方式都将不再使用。
因此，对于带圆角的虚线边框场景，最佳方式一定是 SVG。（切图也算是吧，但是灵活度太低）
只是很多人看到 SVG 会天然的感到抗拒，或者认为 SVG 不太好掌握。
所以，本文再介绍一个非常有用的开源工具 -- Customize your CSS Border：
通过这个开源工具，我们可以快速生成我们想要的虚线边框效果，并且一键复制可以嵌入到 CSS background 中的 SVG 代码图片格式。
图形的大小、边框的粗细、虚线的线宽与间距，圆角大小统统是可以可视化调整的。
通过一个动图，简单感受一下：
本文介绍了 2 种在 CSS 中，不借助切图和 SVG 实现带圆角的虚线边框的方式：
当然，两种 CSS 方式都存在一定瑕疵，但是对于一些简单场景是能够 Cover 住的。
最后，介绍了借助 SVG 工具 Customize your CSS Border 快速生成带圆角的虚线边框的方式。将 SVG 生成的矢量图像数据直接嵌入到 background URL 中，能够应付几乎所有场景，相对而言是更好的选择。
好了，本文到此结束，希望本文对你有所帮助 :)
作者：Chokcoco
链接：https://juejin.cn/post/7311681326712487999
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;
}效果：
把另外三条边透明之后，就只剩一个三角形了。
完
部分资料引用自：
*请认真填写需求信息，我们会在24小时内与您取得联系。
