resize

resize调整元素大小，必须跟overflow配合使用

background-origin

div {
/* border-box:从border区域开始显示背景图片（从边框开始） */
	background-origin: border-box;
	/* content-box:从content区域开始显示背景图片（padding内部，内容区） */
	background-origin: content-box;
	/* padding-box:从padding区域开始显示背景图片（默认值） */
	background-origin: padding-box;
}

background-clip

div {
	/* border-box：从border区域开始向外裁剪图片（默认值） */
	background-clip: border-box;
	/* content-box：从content区域开始向外裁剪图片 */
	background-clip: content-box;
	/* padding-box：从padding区域开始向外裁剪图片 */
	background-clip: padding-box;
	/* text：背景图只呈现在文字上（要加-webkit-前缀，需要文字设置为透明） */
	background-clip: text;
}

outline-offset是独立属性，不是outline的子属性

text-shadow：文字阴影

white-space：文字换行

text-decoration：设置文字的上划线，下划线，删除线

-webkit-text-stroke：文字描边

background-image: linear-gradient(red, yellow, green); 线性渐变（从上往下）

background-image: linear-gradient(to right, red, yellow, green); 线性渐变（从左往右）

background-image: radial-gradient(red, yellow, green);径向渐变（圆心在中间）

background-image: radial-gradient(at left top, red, yellow, green);径向渐变（圆心在左上角）

重复渐变：在没有发生渐变的区域，重新开始渐变

background-image: repeating-linear-gradient();重复渐变

box-sizing: border-box;边框宽度也算在设置的宽高内（默认边框宽度不计算在内）

文本溢出后截掉溢出部分换成三个点

li {
	/* 使用text-overflow必须定义overflow为非visible值 */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

引入项目字体或者网络字体

/* 字体文件太大，不适合完全引入到网页里 */
/* 可以定制字体 */
/* 阿里字体生成网站或其他收费字体网站定制 */
/* https://www.iconfont.cn/ */
/* 参考这个教程https://www.bilibili.com/video/BV1p84y1P7Z5?p=178&vd_source=3cccbc9031fea1afcc449d8ddf0403c9 */
@font-face {
    font-family: "哈哈哈";
    src: url("./font/方正手记.ttf");
}

BFC

解决什么问题

1. 元素开启BFC后，其子元素不会再产生margin塌陷问题

2. 元素开启BFC后，自己不会被其他浮动元素覆盖

3. 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷

如何开启BFC

/* 根元素（html）自动开启 */
.father {
	/* 浮动元素 */
	float: left;
	/* 绝对定位，固定定位的元素 */
	position: absolute;
	/* 行业块元素 */
	display: inline-block;
	/* 表格单元格：table、thead、tbody... */
        display: table;
	/* overflow值不为visible的块元素 */
	overflow: hidden;
	/* 伸缩项目，父元素(body)加display: flex; */
	/* display: flex; */
	/* 多列容器 */
	column-count: 1;
	/* display的值设置为flow-root（副作用最小，最常用） */
	display: flow-root;
}