CSS 语法相关

CSS 语法规则

滚动条样式

/* 滚动条 */
::-webkit-scrollbar {
  /* 纵向 */
  width: 8px;
  /* 横向 */
  height: 8px;
  background-color: #ededed;
}
/* 滚动条上的按钮(上下箭头) */
::-webkit-scrollbar-button {
  display: none;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #ededed;
}
/* 滚动条轨道，没有滑块 */
::-webkit-scrollbar-track-piece {
  background-color: #ededed;
}
/* 垂直滚动条和水平滚动条交汇的部分 */
::-webkit-scrollbar-corner {
  background-color: #ededed;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d6d6d6;
}
/* 右下角拖动块 */
::-webkit-resizer {
  display: none;
}

::-webkit-scrollbar | MDN

识别 HTML 字符中的 \n

TIP

white-space 属性用于设置如何处理元素中的空白

white-space: pre;

属性值	换行符	空格和制表符	文字换行
normal	合并	合并	换行
nowrap	合并	合并	不换行
pre	保留	保留	不换行
pre-wrap	保留	保留	换行
pre-line	保留	合并	换行
break-spaces	保留	保留	换行

MDN

CSS(Unicode 字符) 实现换行

TIP

在 Unicode 中，0x000A 字符是专门控制换行的。在 CSS 中，我们可以写为 \A 或 \000A 作为 after 伪元素的内容，并添加到指定元素中实现换行效果。

<div>
  <span class="br">前端常用知识软件推荐</span>
  <span class="br">踩坑记录</span>
  <span>各种兼容问题</span>
</div>

.br::after {
  content: '\A';
  white-space: pre;
}

前端常用知识软件推荐踩坑记录各种兼容问题

使用 CSS(Unicode 字符)让 inline 水平元素换行

网页置灰

html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  /* 兼容 Firefox */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* 兼容 IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /*兼容 Chrome Safari Edge 等 */
  -webkit-filter: grayscale(1);
}

一段 css 让全站变灰filter - CSS —— MDN

文字只显示一行，超出省略

.text-ellipsis {
  overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

文字最多只显示两行，超出省略

.text-ellipsis-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

如果当前元素处于flex布局等复杂的场景中，那么，样式可能比较难调，用上面两种写法未必能达到预期效果。此时可以试试下面这种写法（多加了一行 white-space: normal）。

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

删除 input标签 type="number" 末尾的箭头

css

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

html

<input type="number" class="no-arrow" />