那些不常见，但却非常实用的 css 属性

前言

本文是本人在网络上看到的好的文章，好的 博客等等一切好的东西的地址。

如有侵犯作者权益的任何行为，请及时与本人沟通，本人将及时处理。

本人做这篇收集博客的主要初衷是为了自己和小伙伴能够更好的学习复习了解掌握更多的知识。

如有带来不便，请见谅！

原文链接 如若想看原文。请点击

常见实用的css属性

1、-webkit-line-clamp

作用： 可以把 块容器 中的内容限制为指定的行数。并且在超过行数后，在最后一行显示”…”

使用场景： 在文本内容多少不确定，但显示区域确定的时候，一般使用这个属性做限定

代码：

display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
-webkit-box-orient: vertical; /*值必须为vertical*/
-webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/
overflow: hidden; /*超出隐藏。必须设置*/

查看MDN 请点击

2、all

作用：将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

使用场景： 偶尔看到， 未使用过， 具体不太清楚， 可查看mdn，有例子

代码：

all: unset; /*initial | inherit | unset*/

• initial 改变该元素或其父元素的所有属性至初始值。
• inherit 改变该元素或其父元素的所有属性的值至他们的父元素属性的值
• unset 如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值

查看MDN 请单击

3、box-decoration-break

作用：用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

• 指定的值将影响以下元素的表现：
  • background
  • border
  • border-image
  • box-shadow
  • clip-path
  • margin
  • padding

使用场景：

代码：

/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;

/* Global values */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;

查看MDN 请点击

4、caret-color

作用：用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

使用场景：改变可编辑区域的插入光标的颜色

代码：

caret-color: red;

查看MDN 请点击

5、clip-path / shape-outside

• clip-path

作用：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。类似的裁剪还有 svg 的 clipPath。

取值：clip-path 的取值有以下几种图形

• inset(xxx): 裁剪为长方形
• circle(xx): 裁剪为原型
• ellipse(xxx): 裁剪为椭圆
• polygon(xx): 裁剪为多边形
• none: 不裁剪

使用场景：对元素进行裁剪时

代码：

/* Keyword values */
clip-path: none;

/* <clip-source> values */ 
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

查看MDN 请点击

• shape-outside

定义：定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

作用：属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。

取值：详细请查看MDN

语法：

/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> 值 */
shape-outside: url(image.png);

/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

6、object-fit / object-position

• object-fit

作用：

• 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框
• 可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

取值：

• contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
• cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框
• fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框
• none：被替换的内容将保持其原有的尺寸。
• scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

案例详情 请查看MDN

• object-position

作用：规定了可替换元素的内容，在这里我们称其为对象（即 object-position 中的 object），在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景

语法：

/* <position> values */
object-position: center top;
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

取值：

position:使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移

详情请点击MDN

7、font-stretch

作用：为字体定义一个正常或经过伸缩变形的字体外观，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。

语法：

/* Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

查看详情请点击MDN

8、max-content / min-content / fill-available / fit-content

这几个值都可用在 width, height, min-width, min-height, max-width 和 max-height 属性上。

display 必须为 inline-block 或者 block，否则上面的值不起作用。

• fill-available

  元素撑满可用空间。参考的基准为父元素有多宽多高。

  类似子元素的 div 撑满父元素的宽，fill-available 不仅可以撑满宽还能撑满高

• max-content

  它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个长度最长(按照文字不换行时计算)的元素即可。
  参考的基准为子元素有多宽多高。

• min-content

  它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个“最小宽度值”最大的元素即可，剩余超长的要么换行，要么溢出
  参考的基准为子元素“最小宽度值”有多宽多高。

  什么是“最小宽度值”？
  比如图片，最小宽度值，就是图片原始的宽高；如果是一串中文，则最小宽度值为单个汉字的宽高；如果是一串英文，则最小宽度值为里面单词最长的那个。

• fit-content

  表示元素自动伸缩到内容的宽度，和 max-content 的区别为，都是刚刚好容纳下子元素中那个长度最长的元素即可。

  不同的是 max-content 在计算时按照文字不换行时计算，如果超过父元素，则不换行，直接产生滚动条；而 fit-content 在超过父元素后，换行，不产生滚动条。

9、fit-content()函数

使用场景：用在 grid 布局当中。

10、resize

11、scroll-behavior

作用：当用户通过 API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为， 平滑到达还是立即到达

12、max() / min()

max 在两者这件取最大；min 函数在两者之间取最小。

max，min 可以用在任何可以设置 , , , , , , or 等值的地方

13、clamp()

作用：clamp 函数会在定义的 三个值之间，取中间的那个值，是大小在中间，不是位置在中间，

语法：clamp(MIN, VAL, MAX)

使用场景：和 max，min 函数一样，可以用在任何可以设置 , , , , , , or 等值的地方

14、conic-gradient()

作用：”锥形渐变”。它是围绕中心点按照扇形方向进行旋转的渐变(而不是从中心点辐射)

15、:out-of-range / :in-range

16、writing-mode

作用：定义了文本水平或垂直排布以及在块级元素中文本的书写方向

17、inline-size

18、block-size

19、drop-shadow

作用：给盒子设置阴影， box-shadow和这个属性类似，但不相同。用 drop-shadow 可以让我们给一个元素添加阴影，这个阴影并不对应于它的边界框，，而是使用该元素的Alpha蒙版。例如，我们可以在透明的PNG或SVG徽标中添加投影

写法：

img {
​ filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}

还不错的讲解

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！

程序的世界，写作的过程中部分文章难免会参考与借鉴网络上的一些资源、见解。如有侵权请与作者联系。如若如实侵权，文章会在24小时内删除。如若由于部分文章存在侵权行为给您带来不便还请见谅。

本博客仅仅为自己以及前端爱好者提供便利，不做任何商业用途。