冷门属性

文字阴影 text-shadow

text-shadow 为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

语法

text-shadow: h-shadow v-shadow blur-radius color;

h-shadow：水平阴影位置
v-shadow：垂直阴影位置
blur-radius：模糊半径
color：阴影颜色

示例

增强文字对比度

文字浮雕效果

行盒截断 box-decoration-break

box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

语法

box-decoration-break: slice | clone;

slice ：截断行盒的样式（默认）
clone ：克隆行盒的样式

示例

创建上下文 isolation

强制为元素创建一个新的层叠上下文

某些时候非常有用

#__nuxt {
  isolation: isolate;
}

图片边框 border-image

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image

border-image 属性用于设置图片边框。也可以设置渐变色边框。

语法

border-image: source slice / width outset repeat;
/* 复合属性 */
border-image-source: url(image);
border-image-slice: 30 30 30 30; /* 图片的切割方式，切割四个角，从左上角开始，顺时针切割 */
border-image-width: 20px; /* 边框宽度 */
border-image-repeat: round; /* 边框重复方式，repeat 表示重复，round 表示平铺，space 表示平铺且有间距，stretch 表示拉伸（默认） */

示例

背景裁剪

切分过程会将图像分割为 9 个区域：四个角、四个边（edge）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

区域 1-4 为角区域（corner region）。每一个都被用于组成最终边框图像的四个角。
区域 5-8 边区域（edge region）。在最终的边框图像中重复、缩放或修改它们以匹配元素的大小。
区域 9 为中心区域（middle region）。它在默认情况下会被丢弃，但如果设置了关键字 fill，则会将其用作元素的背景图像。

文本溢出

单行文本溢出省略号

.text-overflow {
  white-space: nowrap; // 不换行
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 溢出省略号
}

多行文本溢出省略号

.text-overflow {
  display: -webkit-box; // 多行文本
  -webkit-box-orient: vertical; // 垂直方向
  -webkit-line-clamp: 2; // 显示行数
  overflow: hidden; // 溢出隐藏
}

不规则文字环绕

.circle {
  width: 100px;
  height: 100px;
  float: left;
  border-radius: 50%;
  shape-outside: circle(50% at 50% 50%);
}