Skip to content

鼓励作者:欢迎 star 或打赏犒劳


description: '收集个人使用过或遇到的 CSS 奇淫技巧'

CSS 奇淫技巧

收集个人使用过或遇到的 CSS 奇淫技巧

识别 HTML 字符中的 \n

TIP

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

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

MDN

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
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);
}

图片加载失败后的处理

利用替换元素和伪元素的特性来实现

  • 在替换元素加载失败后,会显示伪元素的内容(如 img 标签加载失败)
  • 当替换元素没有内容时,会显示伪元素的内容(如 img 标签没有 src 属性)

实现思路

  • ::before 伪元素用于显示异常图片提示
  • ::after 伪元素用于显示 alt 文案
图片加载成功图片加载失败没有 src 属性

如有转载或 CV 的请标注本站原文地址