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

2023-11-20

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	背景图片从内容的左上角开始。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

样式贴

css

CSS3