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

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

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

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

.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; 
}

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

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

/* 单边的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;
}

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）。

取值	解释
to right	从左到右
to left	从右到左
to bottom	从上到下
to top	从下到上
to bottom right	从左上角到右下角。其他角度一样，不再一一列出
0deg / 0	0度，从下到上，等于to top
45deg	以0度顺时针旋转45度，从左下角到右上角，等于 to top right
90deg	以0度顺时针旋转90度，从左到右，等于to right
180deg	以0度顺时针旋转90度，从上到下，等于 to bottom。其他角度一样，不再一一列出

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

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

③重复线性渐变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;
规定背景的绘制区域，取值有：

取值	解释
border-box	背景被裁剪到边框盒。（等于边框+内边距+内容都显示背景）
padding-box	背景被裁剪到内边距框。（等于除边框外（内边距+内容）都显示背景）
content-box	背景被裁剪到内容框。（等于只有内容区域显示背景）

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

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

取值	解释
border-box	背景图片从边框的左上角开始。
padding-box	背景图像从内边距边缘的左上角开始。
content-box	背景图片从内容的左上角开始。