那些不常見，但卻很是實用的css屬性(整理不易)

一、-webkit-line-clamp

能夠把 塊容器 中的內容限制爲指定的行數。而且在超過行數後，在最後一行顯示"..."

這是正常的展現

display: -webkit-box; /*值必須爲-webkit-box或者-webkit-inline-box*/
-webkit-box-orient: vertical; /*值必須爲vertical*/
-webkit-line-clamp: 2; /*值爲數字，表示一共顯示幾行*/
overflow: hidden;

這是加了 line-clamp 後的展現

https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

二、all

將除卻 unicode-bidi 與 direction 以外的全部屬性重設至其初始值，或繼承值。

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

initial 改變該元素全部屬性的值至初始值。

inherit 改變該元素的值 至 從父元素繼承的值

unset 若是該元素的屬性的值是可繼承的，重置爲父元素的繼承的值，反之則改變爲初始值。

三、box-decoration-break

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-decoration-break

四、caret-color

用來定義插入光標（caret）的顏色，這裏說的插入光標，就是那個在網頁的可編輯器區域內，用來指示用戶的輸入具體會插入到哪裏的那個一閃一閃的形似豎槓 | 的東西。

caret-color: red;

五、clip-path / shape-outside

clip-path 屬性使用裁剪方式建立元素的可顯示區域。區域內的部分顯示，區域外的隱藏。相似的裁剪還有 svg 的 clipPath。

clip-path 的取值有如下幾種圖形

inset(xxx): 裁剪爲長方形

circle(xx): 裁剪爲原型

ellipse(xxx): 裁剪爲橢圓

polygon(xx): 裁剪爲多邊形

none: 不裁剪

例子前的準備

<div
  style="width: 500px; height: 500px;text-align: left;background-color:gray;color:white"
>
  <img
    class="clip-mode"
    style="float: left; margin:20px"
    src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"
    width="150"
  />
  We had agreed, my companion and I, that I should call for him at his house,
  after dinner, not later than eleven o’clock. This athletic young Frenchman
  belongs to a small set of Parisian sportsmen, who have taken up 「ballooning」
  as a pastime. After having exhausted all the sensations that are to be found
  in ordinary sports, even those of 「automobiling」 at a breakneck speed, the
  members of the 「Aéro Club」 now seek in the air, where they indulge in all
  kinds of daring feats, the nerve-racking excitement that they have ceased to
  find on earth.
</div>

不裁剪

clip-path: none;

圓形裁剪

clip-path: circle(40%);  //半徑爲40%，圓心默認爲中心

橢圓裁剪

clip-path: ellipse(130px 140px at 10% 20%);

多邊形裁剪

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

咱們能夠看到上面圖形如何裁剪，外面的看不見的框始終是矩形，也就是說文字始終是按矩形的樣式在周圍環繞。

那麼有辦法讓文字牢牢的貼在裁剪的圖形周圍呢？
有的，使用 shape-outside 屬性

shape-outside 定義了一個能夠是 非矩形的形狀，相鄰的內聯內容應圍繞該形狀進行包裹。默認狀況下，內聯內容包圍其矩形邊距;

默認矩形環繞

clip-path: none;
shape-outside: none

圓形環繞

clip-path: circle(40%);
shape-outside: circle(40%);

橢圓環繞

clip-path: ellipse(130px 140px at 10% 20%);
shape-outside: ellipse(130px 140px at 20% 20%);

多變性環繞

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

固然你不必定在圓形裁剪上，使用圓形環繞，你能夠在圓形裁剪上使用多邊形環繞，在多邊形裁剪上，使用菱形環繞。總之這兩個之間不要緊，不是兩兩匹配的。都隨你便，本身定義

六、object-fit / object-position

object-fit 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度肯定的框。

object-position 屬性來指定被替換元素的內容對象在元素框內的對齊方式。

注: 其中可替換元素有 iframe，video，embed，img，還有一些在特性狀況也是可替換元素，option，audio，canvas，object

例子前的準備

<div style="width: 300px; height: 300px; background-color:gray;">
    <img class="clip-mode" style="height: 100%; width: 100%;" src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg">
</div>

圖片必定能要設置爲寬高 100%，即不能超過父容器，才能夠設置 object-fit，不然沒意義。

fill 填滿 圖片會拉變形，寬度和高度都被拉到父容器的 100%，以適應父容器

object-fit: fill;

contain 包容 圖片不會變形，圖片會按照自身比例進行縮放，整個圖片放入父容器中，較短的邊會出現自動填充的空白。

object-fit: contain;

cover 覆蓋 圖片不會變形，圖片會按照自身比例進行縮放，整個圖片放入父容器中，按照圖片最短的邊，歸入父容器爲基準。較長的邊會溢出

object-fit: cover;

none 和父容器的寬高不要緊。展現其圖片最原始的寬高比，以自身圖片的「中心」爲基點，放置到父容器的「中心」位置。

object-fit: none;

scale-down 內容的尺寸與 none 或 contain 中的一個相同，取決於它們兩個之間誰獲得的對象尺寸會更小一些。

object-fit: scale-down;

若是圖片比父容器尺寸大，那麼按照 contain 的效果，若是圖片比父容器小，那麼按照 none 的效果。

在上面 object-fit 的展現中，咱們發現可替換元素的對齊方式都是自動的。

好比 object-fit: fill; 的左上角和父容器的左上角對齊。

object-fit: none;的中心和父容器的中心對齊等等。

可是咱們想手動更改對齊方式呢？？

可使用 object-position 屬性， 規定了可替換元素的內容，在其內容框中的位置。

object-position: 10px 10px; 能夠設置 px，第一個值表明距離父容器左邊的距離，第二個值表明距離父容器頂部的距離。只有一個數值則只表明距離父容器左側的距離。也能夠設置%數值，但此時只有某一邊有空白纔會起做用，若是沒有空白，恰好鋪滿父元素，則不起做用。設置 px 就沒有這樣的問題，任何以後都會起做用。

object-position: right top;能夠設置關鍵字，第一個值關鍵字可設置（left|center|right），第二個關鍵字可設置(top|center|bottom),此時不表示距離左側或者頂部的距離，而表示放置在父元素的什麼位置。

object-fit: fill;
object-position: 50px 50px;   //距離左側10px，距離頂部10%

加 object-position 先後對比圖:

object-fit: contain;
object-position: right top;  //停留子 右上方

加 object-position 先後對比圖:

七、font-stretch

爲字體定義一個正常或通過伸縮變形的字體外觀，它僅僅意味着當有多種字體可供選擇時，會爲字體選擇最適合的大小。

normal 默認字體

semi-condensed, condensed, extra-condensed, ultra-condensed 小於默認字體

semi-expanded, expanded, extra-expanded, ultra-expanded 大於默認字體

八、font-variant-caps

能夠控制大寫字母特殊字符的使用。

• normal 關閉一切特殊字符變體的使用。
• small-caps 容許小型大寫字母的使用（OpenType 特性：smcp）。小型大寫字母指使用大寫形式，但尺寸與對應小寫字母相同的字母。
• all-small-caps 將大小寫字母所有轉化爲小型大寫字母。（OpenType 特性: c2sc, smcp）。
• petite-caps 容許特小型大寫字母的使用（OpenType 特性: pcap）。
• all-petite-caps 將大小寫字母所有轉化爲小型大寫字母。（OpenType 特性: c2pc, pcap）。
• unicase 容許將大寫字母轉化爲小型大寫字母與普通小寫字母的混用 （OpenType 特性: unic）。
• titling-caps 容許首字母大寫（OpenType 特性: titl）。大寫字母變體字符一般被設計成與用於小寫字母。在標題序列中，若是均使用大寫字母，可能會帶來過於強烈的視覺效果。首字母大寫即用來應對這種狀況。

九、font-variant-east-asian

控制對東亞字符(如日語和漢語,韓語等)使用替代符號。

值有一下幾種:
normal; ruby; jis78; jis83; jis90; jis04; simplified; traditional; full-width; proportional-width

十、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 不只能夠撐滿寬還能撐滿高。

例子前的代碼

<div style="width: 300px; height: 100px; background-color:gray;">
  <span style="display:inline-block;background-color: burlywood;"
    >這是子元素的內容</span
  >
</div>

給 span 上設置 fill-available 時的不一樣表現

假如裏面的有個元素，是 img 呢？它也是 inline-block，應該也知足狀況。

咱們能夠看到 img 和 span 的不一樣在於，設置 width 或者 height 其中一個時，整個 image 會按照自身比例縮放。

max-content

它的寬度或者高度，會自動調整爲，剛恰好容納下子元素中那個長度最長(按照文字不換行時計算)的元素便可。
參考的基準爲子元素有多寬多高。

<div class="parent">
  <div class="current" style="width: 200px; height: 300px; background-color:gray;">
    <p>這是普通的p元素行，內容爲文字</p>
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"/>
  </div>
</div>

給 current div 設置 max-content 時得不一樣表現。

min-content

它的寬度或者高度，會自動調整爲，剛恰好容納下子元素中那個「最小寬度值」最大的元素便可，剩餘超長的要麼換行，要麼溢出
參考的基準爲子元素「最小寬度值」有多寬多高。

什麼是「最小寬度值」？
好比圖片，最小寬度值，就是圖片原始的寬高；若是是一串中文，則最小寬度值爲單個漢字的寬高；若是是一串英文，則最小寬度值爲裏面單詞最長的那個。

fit-content

表示元素自動伸縮到內容的寬度，和 max-content 的區別爲，都是剛恰好容納下子元素中那個長度最長的元素便可。

不一樣的是 max-content 在計算時按照文字不換行時計算，若是超過父元素，則不換行，直接產生滾動條； 而 fit-content 在超過父元素後，換行，不產生滾動條。

十一、fit-content()

這個不一樣於上面的 fit-content 值，它是函數，用在 grid 佈局當中。

(略)

具體查看 grid 佈局。

十二、resize

比較簡單，能夠查看

官方文檔

1三、scroll-behavior

當用戶經過 API 觸發滾動操做時，CSS 屬性 scroll-behavior 爲一個滾動框指定滾動行爲， 平滑到達仍是當即到達

能夠查看
官方文檔

1四、max() / min()

max 在二者這件取最大；min 函數在二者之間取最小。

max，min 能夠用在任何能夠設置 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> 等值的地方

width: max(50vw, 300px);
width: min(50vw, 300px);

1五、clamp()

clamp 函數會在定義的 三個值之間，取中間的那個值，是大小在中間，不是位置在中間，

clamp(MIN, VAL, MAX)

和 max，min 函數同樣，能夠用在任何能夠設置 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> 等值的地方

font-size: clamp(1px, 3px, 2px);    //中間值爲2px
font-size: clamp(1px, 3px, 5px);    //中間值爲3px
font-size: clamp(4px, 3px, 5px);    //中間值爲4px

width: clamp(200rem, 25vw, 150px);  //在這三個之間取中間值

1六、conic-gradient()

在漸變中咱們知道，有:

• 線性漸變,linear-gradient，從一個方向，沿着另外一個方向，顏色線性過渡。

• 徑向基漸變，radial-gradient，從某一個點，沿圓環向外慢慢輻射。

除此以外，還有一種漸變，叫"錐形漸變"。它是圍繞中心點按照扇形方向進行旋轉的漸變(而不是從中心點輻射)

這是錐形和徑向漸變的區別圖

background: conic-gradient(red, orange, black, green, blue);

默認從時鐘 12 點，按照順時針旋轉

1八、:out-of-range / :in-range

比較簡單，能夠查看官方文檔

:out-of-range

:in-range

1九、writing-mode

定義了文本水平或垂直排布以及在塊級元素中文本的書寫方向

horizontal-tb 表示水平書寫，從上(top)到下(bottom)書寫

vertical-rl 表示垂直書寫，從右(right)向左(left)(古人書法就這麼寫的)

vertical-lr 表示垂直書寫，從左向右

注意沒有 horizontal-bt,不要杜撰

20、inline-size

和元素的 width，height 效果同樣，都會改變盒子的大小。可是會覆蓋 width，height 值。

不一樣在於，width 是絕對的水平方向，height 是絕對的豎直方向；

而 inline-size 是相對的水平方向，可經過 writing-mode 模式，改變方向

2一、block-size

相似於 inline-size，只不過和 inline-size 恰好相反，block-size 默認設置的是 height 方向的值。