利用背景渐变实现边框样式

css实现信封边框和虚线样式，利用线性渐变背景以及背景重复完成。

1、利用渐变背景实现信封边框样式。

<div class="letter-border">div>
1

.letter-border {
	margin: 100px;
	width: 750px;
	height: 100px;
	box-sizing: border-box;
	border: 6px solid transparent;
	background: linear-gradient(white, white) padding-box,
				repeating-linear-gradient(-45deg, #1A62E5  0, #1A62E5  12.5%, transparent 0, transparent 25%, #FD694B 0, #FD694B 37.5%, transparent 0, transparent 50%) 0 / 75px 75px; 
}
1
2
3
4
5
6
7
8
9

2、利用渐变背景实现可设置间距虚线效果。

<div class="dashed-border">div>
1

/* 单边的border，实现四边的border可写四个div */
.dashed-border {
	margin: 100px;
	width: 200px; /* 宽度可设置为边框宽度1px */
	height: 100px;
	background: linear-gradient(to bottom, #C6C6C6 0%, #C6C6C6 50%, transparent 50%);
	background-size: 1px 20px; /* 边框的宽度和间距大小 */
	background-repeat: repeat-y;
}
1
2
3
4
5
6
7
8
9

3、用到的background属性

语法：background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

（1）linear-gradient线性渐变

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
至少两种颜色才能生效。

① 方向取值：默认从上到下（ to bottom，180deg）。

②颜色占比：值为当前颜色开始着色的位置，颜色之间衔接过渡色。

取值可为百分比，具体像素值。

③重复线性渐变repeating-linear-gradient，语法和linear-gradient一样。

例：background: linear-gradient(-45deg, #ff0000 20%, rgba(255,0,0,0.6) 50%);

例：background: repeating-linear-gradient(-45deg, #ff0000 20%, rgba(255,0,0,0.6) 50%);

（2）background-clip裁剪背景属性，默认值：border-box

语法：background-clip: padding-box;
规定背景的绘制区域，取值有：

（3）background-origin 背景位置属性，默认值padding-box（没用到但容易搞混的）

语法：background-origin: padding-box;
指定背景图像的位置，取值有：