艾恩葛朗特CSS 奇淫技巧
识别 HTML 字符中的 \n
TIP
white-space 属性用于设置如何处理元素中的空白
css
white-space: pre;
| 属性值 | 换行符 | 空格和制表符 | 文字换行 |
|---|---|---|---|
| normal | 合并 | 合并 | 换行 |
| nowrap | 合并 | 合并 | 不换行 |
| pre | 保留 | 保留 | 不换行 |
| pre-wrap | 保留 | 保留 | 换行 |
| pre-line | 保留 | 合并 | 换行 |
| break-spaces | 保留 | 保留 | 换行 |
CSS(Unicode 字符) 实现换行
TIP
在 Unicode 中，0x000A 字符是专门控制换行的。在 CSS 中，我们可以写为 \A 或 \000A 作为 after 伪元素的内容，并添加到指定元素中实现换行效果。
html
<div>
<span class="br">前端常用知识软件推荐</span>
<span class="br">踩坑记录</span>
<span>各种兼容问题</span>
</div>
css
.br::after {
content: '\A';
white-space: pre;
}
前端常用知识软件推荐踩坑记录各种兼容问题
使用 CSS(Unicode 字符)让 inline 水平元素换行
网页置灰
css
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
滚动条样式
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;
}