css总结（持续更新）

总是记不住，每次用每次查的样式

css显示省略号

• 单行文本省略：

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

• 多行文本省略：

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;

• 英文自动换行：

	word-wrap:break-word;
	word-break:break-all;

css阴影

	box-shadow: 10px 10px 5px #888888;

• 语法：

	box-shadow: h-shadow v-shadow blur spread color inset;

值	是否必需	描述
h-shadow	必需	水平阴影的位置。允许负值
v-shadow	必需	垂直阴影的位置。允许负值
blur	可选	模糊距离
spread	可选	阴影的大小
color	可选	阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选	从外层的阴影（开始时）改变阴影内侧阴影

css边框

• 边框圆角

	border-radius: 15px 50px 30px 5px;

四个值分别控制左上角、右上角、右下角、左下角；

	border-radius: 15px 50px 30px：

三个值分别控制左上角、右上角和左下角、右下角；

	border-radius: 15px 50px：

两个值分别控制左上角和右下角、右上角和左下角；

• 语法：

	border-radius: 1-4 length|% / 1-4 length|%;

值	描述
length	定义弯道的形状。
%	使用%定义角落的形状。

详细内容指路 菜鸟教程CSS3 border-radius 属性

• 边框实现三角形

	/* 块元素块元素 */
	display: block;
	margin: 20px auto;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: pink;

思路：块元素宽高设为0，由边框来控制大小，边框颜色设为透明，修改边框颜色为目标颜色，实现三角形效果，其中left控制向右的三角，right控制向左的三角，top控制向下的三角，bottom控制向上的三角；
详细内容指路 CSDN博主「坏丶毛病」的原创文章

媒体查询

• 语法：

	@media not|only mediatype and (mediafeature and|or|not mediafeature) {
	  CSS-Code;
	}

• 示例：（文档宽度小于 300 像素则修改背景颜色(background-color)）

	@media screen and (max-width: 	ccc300px) {
	    body {
	        background-color:lightblue;
	    }
	}

详细内容指路 菜鸟教程CSS3 @media 查询

滚动条样式

• 主要属性：

值	描述
::-webkit-scrollbar	滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button	滚动条两端的按钮
::-webkit-scrollbar-track	外层轨道
::-webkit-scrollbar-track-piece	内层滚动槽
::-webkit-scrollbar-thumb	滚动的滑块
::-webkit-scrollbar-corner	边角
::-webkit-resizer	定义右下角拖动块的样式

• 其他属性：

值	描述
:horizontal	水平方向的滚动条
:vertical	垂直 方向的滚动条
:decrement	应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
:increment	decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
:start	伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end	类似于start伪类，标识对象是否放到滑块的后面。
:double-button	该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
:single-button	类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
:no-button	用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
:corner-present	用于所有滚动条轨道，指示滚动条圆角是否显示。
:window-inactive	用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

• 示例：

	.outer {
		width: 300px;
		height: 260px;
		margin: 100px auto;
		background: #FFC0CB;
		overflow: auto;
	}
	.inn {
		width: 100%;
		height: 1000px;
	}
	.outer::-webkit-scrollbar {
		width: 12px;
	}
	.outer::-webkit-scrollbar-track {
		border-radius: 10px;
	}
	.outer::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.2);
	}

	<div class="outer">
		<div class="inn"></div>
	</div>

background背景

• 线性渐变—自上至下（默认）

background: #3d75e6;
background: -webkit-linear-gradient(#3d75e6, #8caff3);
background: -o-linear-gradient(#3d75e6, #8caff3);
background: -moz-linear-gradient(#3d75e6, #8caff3);
background: linear-gradient(#3d75e6, #8caff3);

禁止文本被选中

{
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

一些有用的技巧

选择器

• 常用：

1. :nth-child(n)，可用于匹配父元素中的第 n 个子元素，元素类型没有限制；

• 基础用法：

	/* 选中第三个元素 */
	li:nth-child(3) {
		background: lightblue;
	}

• 奇偶数：

	li:nth-child(odd) {
		background: lightblue;
	}
	li:nth-child(odd) {
		background: pink;
	}

• 公式n:

	/* 偶数标签 */
	li:nth-child(2n) {}
	/* 奇数标签 */
	li:nth-child(2n-1) {}
	li:nth-child(2n+1) {}
	/* 倍数 */
	li:nth-child(3n) {}
	/* 选中第三个直到最后 */
	li:nth-child(n+3) {}
	/* 选中第一个到第三个 */
	li:nth-child(-n+3) {}
	/* 选中第三个到第六个 */
	li:nth-child(n+3):nth-child(-n+6) {}

2. :not(n)，选择除n之外的元素；
3. :first-child、:last-child，选中第一个或最后一个元素；

详细内容指路 菜鸟教程CSS 选择器

display: flex

flex-shrink: 0; // 阻止固定宽度或高度元素被压缩