css必備知識點

時間 2019-11-08

標籤 css 必備知識欄目 CSS 简体版

原文原文鏈接

1、在一個div中實現未知圖片上下左右居中

<body>
    <style>
        .outer {
            position: relative;
            width: 600px;
            height: 600px;
            background: red;
        }
        .innerImg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
複製代碼

效果以下：css

2、使用display:table-cell和水平居中、垂直居中來實現圖片居中

<body>
    <style>
        .outer {
            display: table-cell;
            width: 600px;
            height: 600px;
            margin: 0 auto;
            text-align: center;
            vertical-align: middle;
            background: rebeccapurple;
        }
        img{
            vertical-align:middle;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
複製代碼

3、使用flex佈局

<body>
    <style>
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: rebeccapurple;
        }
    </style>
    <div class="outer">
        <img class="innerImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551859237655&di=070c00eb8908bdecc2b10b67400a7723&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2Fda30383dgy1fue1s8rswsj20et0dugw5.jpg" alt="">
    </div>
</body>
複製代碼

效果與上圖相同html

4、多行文字垂直居中

<body>
    <style>
        .outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 600px;
            height: 600px;
            background: pink;
        }
        p {
            width: 300px;
        }
    </style>
    <div class="outer">
      <p>豫章故郡，洪都新府。星分翼軫，地接衡廬。襟三江而帶五湖，控蠻荊而引甌越。物華天寶，龍光射牛鬥之墟；人傑地靈，徐孺下陳蕃之榻。雄州霧列，俊採星馳。臺隍枕夷夏之交，賓主盡東南之美。都督閻公之雅望，棨戟遙臨；宇文新州之懿範，襜帷暫駐。十旬休假，勝友如雲；千里逢迎，高朋滿座。騰蛟起鳳，孟學士之詞宗；紫電青霜，王將軍之武庫。家君做宰，路出名區；童子何知，躬逢勝餞。</p>
    </div>
</body>
複製代碼

效果圖：jquery

5、已知寬高的上下左右居中

<body>
    <style>
        .outer {
            position: relative;
            width: 600px;
            height: 600px;
            background: rebeccapurple;
        }
        .inner {
            position: relative;
            width: 200px;
            height: 300px;
            left: 50%;
            top: 50%;
            margin-left: -100px; // 或 transform: translateX(-50%)
            margin-top: -150px; // 或 transform: translateY(-50%)
            background: white;
        }
    </style>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
複製代碼

效果以下：css3

6、省略號

單行文本省略號，部分瀏覽器須要加width屬性。web

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //規定段落中的文本不進行換行
複製代碼

多行文本api

（1）webkit瀏覽器或移動端的頁面瀏覽器

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
複製代碼

跨瀏覽器兼容方案bash

p {
    position: relative;
    line-height: 2em;
    height: 6em;
    overflow: hidden;
}
p::after {
    content: "...";
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
}
複製代碼

注意：app

1.height高度是line-height的3倍；ide

2.要支持IE8，須要將::after替換成:after

7、vertical-align: middle;

如何讓div裏的圖片和文字同時上下居中

img標籤是行內元素，設置文本和圖片垂直居中時須要把div的line-height和height的值設置相同便可。
而且img須要設置vertival-align：middle；

複製代碼

vertical-align css的屬性vertical-align用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。只對行內元素、表格單元格元素生效，不能用它垂直對齊塊級元素。

vertical-align：baseline/top/middle/bottom/sub/text-top;
複製代碼

8、cursor的url屬性

cursor的屬性若是爲url，須要使用圖片做爲效果時，圖片的大小不能超過128px*128px

9、transfrom的rotate屬性在span標籤下失效

由於span標籤是inline屬性，rotate只在inline-block或block屬性時生效。

10、flex實現內部元素三等分

<body>
    <style>
        .tab {
            display: flex;
            width: 100%;
            height: 100px;
            background: blue;
            list-style: none;
        }
        li {
            flex: 1; // 表示子元素之間平均分配
            background: red;
        }
        li:nth-child(2){
            background: yellow;
        }
    </style>
    <ul class="tab">
        <li>flex1</li>
        <li>flex2</li>
        <li>flex3</li>
    </ul>
</body>
複製代碼

效果以下：

flex-grow屬性中的grow是擴展的意思，擴展的就是flex子項所佔據的寬度，擴展所侵佔的空間就是除去元素外的剩餘的空白間隙。

flex-grow：<number>; /* 數值，能夠是小數，默認值是0 */
複製代碼

flex-grow不支持負值，默認值是0，表示不佔用剩餘的空白間隙擴展本身的寬度。若是flex-grow 大於0，則flex容器剩餘空間的分配就會發生變化，具體規則以下：

全部剩餘空間總量是1。
若是隻有一個flex子項設置了flex-grow屬性值：
- 若是 flex-grow值小於1，則擴展的看空間就總剩餘空間和這個比例的計算值。
- 若是flex-grow值大於1，則獨享全部剩餘空間。
若是有多個flex設置了flex-grow屬性值：
- 若是flex-grow值總和小於1，則每一個子項擴展的空間就總剩餘空間和當前元素設置的flex-grow比例的計算值。
- 若是flex-grow值總和大於1，則全部剩餘空間被利用，分配比例就是flex-grow屬性值的比例。 例如全部flex子項都設置flex-grow:1,則表示剩餘空白間隙你們等分 ，若是設置的flex-grow比例是1：2：1，則中間的flex子項佔據一半的空白間隙，剩餘的先後兩個元素等分。

flex屬性是 flex-grow, flex-shrink和 flex-basis的縮寫。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
複製代碼

其中第2和第3個參數是能夠選的，默認值爲0 1 auto。

十一.column-count實現三列布局

通常用於在線文檔

column-count: 3;
複製代碼

十二.修改全站字體

html[lang=en-RU] body *{
  @import url('http://fonts.googleapis.com/css?family=Roboto:400,700');
  font-family: 'Roboto' !important;
}
複製代碼

十三.px

在不一樣的屏幕上，css像素所呈現的物理尺寸是一致的，而不一樣的是css像素所對應的物理像素數是不一致的。在普通屏幕下1個css像素對應1個物理像素，而在Retina屏幕下，1個像素對應的倒是4個物理像素。

CSS像素

css像素是一個抽象的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。通常狀況之下，css像素稱爲與設備無關的像素（device-indpendent pixel）,簡稱DIPs.

屏幕密度

屏幕密度是指一個設備表面上存在的像素數量，它一般以每英寸有多少個像素來計算（PPI）

物理像素

物理像素又被稱爲設備像素，他是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。正是這些設備像素的微小距離欺騙了咱們肉眼看到的圖像效果。

推薦一篇文章：再談Retina下1px的解決方案

十四. 媒體查詢

1.什麼是媒體查詢

媒體查詢可讓咱們根據設備顯示器的特性(如視口寬度、屏幕比例、設備方向：橫向或縱向)爲其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的表達式組成。媒體查詢中可用於檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，能夠在不改變頁面內容的狀況下，爲特定的一些輸出設備定製顯示效果。
複製代碼

邏輯操做符

not and only

在html中寫入media

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
複製代碼

參數詳解：

width=device-width: 寬度等於當前設備的寬度
initial-scale=1: 初始的縮放比例（默認爲1）
minimum-scale=1: 容許用戶縮放到的最小比例（默認爲1）
maximun-scale=1: 容許用戶縮放到的最大比例（默認爲1）
user-scalable=no: 用戶是否能夠手動縮放（默認爲no)

寫Media中的代碼

/* 當頁面大於1200px時，大屏幕，主要是PC端 */
@media (min-width: 1200px) {
    
}
/* 在992 和 1199像素之間的屏幕裏，中等屏幕，分辨率低的pc */
@media (min-width: 992px) and (max-width: 1199px) {
    
}
/* 在768 和 991 像素之間的屏幕裏，小屏幕，主要是PAD */
@media (min-width: 768px) and (max-width: 991px) {
    
}
/*在480 和767 像素之間的屏幕裏，超小屏幕，主要是手機*/
@media (min-width: 480px) and (max-width: 767px) {

}
/*在小於480 像素的屏幕，微小屏幕，更低分辨率的手機*/
@media (max-width: 479px) {
    
}
複製代碼

十5、box-shadow

/* x偏移量 | y偏移量 | 陰影模糊半徑 |陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0,0,0, 0.2);
任意數量的陰影，以逗號分隔
複製代碼

模糊距離和擴散半徑的區別：

相同點：都會產生額外長度區域。

不一樣點：模糊距離產生的額外長度帶有模糊效果。

十6、scss中的`@mixin`與`@function`

scss是Sass3引入的新語法，語法徹底兼容CSS3，且繼承了Sass的強大功能。全部在CSS中正常工做的代碼也能在SCSS中正常工做。

@mixin

// 定義
@mixin rounded($amount) {
    -moz-border-radius: $amount;
    border-radius: $amount;
}
// 使用
.box {
    border: 3px solid #777;
    @include rounded(5px);
}
// 結果
.box {
    border: 3px solid #777;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
複製代碼

@function

// 定義 pc端2560設計稿
@function v($px) {
    @return round($px * 10000 / 2560) /10000 * 100vw;
}
// 使用
.root {
    width: v(2560);
}
// 結果
.root {
    width: 100vw;
}
複製代碼

@mixin 用於被屢次聲明的樣式。符合DRY原則（Don't Repeat youself）.

@function 相似於聲明一個函數，調用後計算返回相應的結果

十7、選擇器 `~` 和 `+` 的區別

相鄰兄弟選擇器+ 相鄰兄弟選擇器可選擇緊接在另外一個元素後的元素，且兩者有相同的父元素。若是要增長緊接在h1元素後出現的段落上的邊距，寫法以下：

h1 + p {marign-top: 20px;}
複製代碼

這個選擇器：選擇器緊接在h1元素後出現的段落，h1和p元素擁有共同的父元素。

相同的父元素~ 爲全部相同的父元素中位於p元素以後的全部ul元素設置背景：

p~ul {background: #000000;}
複製代碼

p~ul 選擇器：p以後出現的全部ul；兩種選擇器必須擁有相同的父元素，可是ul沒必要是直接緊隨p。

區別： +是必須緊鄰的兄弟元素。 ~是元素後邊的同級元素，沒必要是緊鄰的。

兩個選擇器都必須擁有相同的父元素。

附：選擇器大於號 >

大於號表示爲子選擇器（child selector），限定在第一級子元素中選擇第一個子元素

十8、`align-items`和 `align-content`的區別

align使成一行

align-items屬性適用於全部的flex容器，它是用來設置每一個flex元素在側軸上的默認對齊方式。align-items屬性定義項目在交叉軸上如何對齊。

display: flex;
align-items: flex-start | flex-end | center | stretch | baseline;
複製代碼

align-content對單行是沒有效果的，此屬性只適用於多行的flex容器，而且當側軸上有多餘空間使用flex線對齊。align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

align-content: space-between | flex-start | flex-end | center | space-around | stretch;
複製代碼

align-items和align-content有相同的功能，不一樣點是它是用來讓每個單行的容器居中而不是讓整個容器居中。

十9、`box-sizing`的有效值以及所對應的盒模型規則

盒模型是css的基石之一。頁面上的每個元素都被看作一個矩形框，這個框由元素的內容、內邊距、邊框、外邊距組成。

外邊距是透明的，通常使用它來控制元素之間的間隔。

box-sizing屬性能夠定義要使用哪一種盒模型。

box-sizing: content-box | border-box;

content-box: width = 內容的寬度；height = 內容的高度；寬度和高度的計算值都不包含內容的邊框（border）和內邊距（padding），是默認值，標準盒子模型。若是你設置一個元素的寬爲100px，那麼這個元素的內容區還有100px寬，而且任何邊框和內邊距的寬度都會被增長到最後繪製出來的元素的寬度中。

border-box: width 和 height 屬性包括內容，內邊距和邊框，可是不包括外邊距。屬於IE盒模型。尺寸的計算公式： width = border + padding + 內容的寬度; height = border + padding + 內容的高度;

二十. img標籤的默認間隙問題

問題：這個是瀏覽器的一個設計問題

1.上下間距問題
2.左右間距問題
3.四周間距問題

1.上下間距問題
1.1 對img加上 vertical-align: top 或者 vertical-align: bottom 屬性，但此屬性只能解決圖片產生的上下默認邊距問題。
img {
    vertical-align: top; // 或 vertical-align: bottom;
}
1.2 對父元素 div 加上 line-height: 0; 屬性，但此屬性只能解決圖片產生的上下默認邊距的問題。
div {
    line-height: 0;
}

2.左右間距問題
2.1 產生左右默認間距的問題是因爲代碼換行問題識別而產生，能夠在img代碼後加註釋進行鏈接。
2.2 代碼不換行（不建議使用）
2.3 float來解決，或者將img ，display：block； 但此時則會出現img換行問題又得繼續進行float操做！（如div沒設置高度，同時還會此時高度塌陷的問題！高度塌陷能夠用其餘方式來解決）

3.四周間距問題
3.1 在父元素上加上 font-size ： 0；能同時解決四周所產生的邊距問題！（但在父元素下同時存在文本的狀況下，這須要單獨對文本進行 font-size 聲明大小！）

div {
    font-size: 0;
}

3.2 用float來解決
img {
    float: left;
}
複製代碼

參考

二十一. 代碼實現左邊div寬度100px,右邊自適應的佈局

方法一：float

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
}
.layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    height: 100px;
    background: blue;
    // overflow: auto; 若是左右高度不一致，可用此屬性觸發BFC
}
</style>
複製代碼

效果以下：

方法二：flex

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
    display: flex;
}
.layout .left {
    flex: none; // flex-grow: 0; flex-shrink: 0; flex-basis: auto;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    height: 100px;
    background: blue;
    flex: 1;
}
</style>
複製代碼

效果以下：

方法三：table

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
    display: table;
}
.layout .left {
    display: table-cell;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    display: table-cell;
    height: 100px;
    background: blue;
}
</style>
複製代碼

方法四：css計算寬度

<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.layout {
    background: yellow;
}
.layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.layout .right {
    float: right;
    height: 100px;
    background: blue;
    width: calc(100% - 100px)
}
</style>
複製代碼

二十一. margin的auto的真正含義

auto 能夠理解爲自動、自適應的概念

margin: 0 auto;
就是上下邊距爲0，左右變爲爲auto，就是自動適應。

margin-left: auto;
就是左側自適應，若是右側爲0，則會居右。和float: right;效果相同。

複製代碼

margin同級元素之間應用

margin在水平方向的值不會合並，豎直方向的邊距會合並（等於外邊距中較大的一個）。

另：當一個元素同時設置了 margin-top 和 margin-bottom,可是內容爲空，那麼這兩個margin值也會疊加，值爲二者最大的一個，它相似與豎直方向上兩個盒子margin值的疊加。

margin在父元素和子元素之間的應用

2.1 在子元素中設置水平方向的margin值，margin-left、margin-right。在子元素中設置margin-left，其值其實是子元素的左邊框距離父元素左padding內側的距離。

2.2 在子元素中設置豎直方向的margin值，咱們但願子元素的上部距離父元素的上部爲100px，但是咱們看到的倒是父元素的上部距離瀏覽器頁面的上部有100px的距離，這是爲何呢？哪裏出現問題了呢？實際上這是由於當父元素沒有設置padding值以及border值時，出現了一個bug--父元素的上方與子元素的上方徹底重合在了一塊兒，沒法分開。因此纔會致使上述這種父元素和子元素同時向下的狀況。

對於這種問題解決方法有下面幾種：

方法一：給父元素添加padding-top值;
方法二：給父元素添加border值;
方法三：給父元素添加屬性overflow:hidden;
方法四：給父元素或者子元素聲明浮動float;
方法五：使父元素或子元素聲明爲絕對定位：position:absolute;
方法六：給父元素添加屬性 overflow:auto; positon:relative;

margin值的單位爲%

3.1 若是margin值是以%爲單位，實際上這個時候百分比（%）是相對於該元素的父元素（容器）的寬度，相對於同級元素和父子元素都是如此。 同級元素之間在豎直方向上使用margin，當值的單位爲%時，也是相對於父元素的寬度。

3.2 父子元素使用值爲%的margin。對於父子元素，若是在子元素中使用單位爲% margin，那麼這個marign值是相對於父元素的寬度和高度。例如我設置了margin-left的值爲20%，margin-top的值爲20%，父元素的width爲500px,父元素的height爲300px.此時margin-left和margin-top都爲100px，所以子元素的marign-top值最終一樣是相對於父元素的寬度而非高度。

參考

二十二. em

.div {
    font-size: 1.2em;
    line-height: 1.5em;
}
// 若父元素字體大小爲10px，則div的字體大小爲12px，行高爲18px,以當前元素的 font-size 爲準。
複製代碼

font簡寫規則 font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: normal; font-stretch: normal; font-size: 2em; line-height: 2em; font-family: Arial;

<div style="font-size: 10px">
  <p style="font: 2em/2em Arial">測試</p>
</div>
// p標籤的font-size爲20px，line-height爲40px；
複製代碼

font: 2em/2em Arial等同於
font-size: 2em;
line-height: 2em;
font-family: Arial;

line-height與font-size存在什麼關係

line-height若是爲em或1.2等則繼承自身font-size，1.5em則爲字體大小的1.5倍

line-height與所屬元素的height有什麼關係

height爲元素的高度，line-height爲內部字體的行高

二十3、自定義滾動條

webkit內核瀏覽器自定義滾動條樣式

以垂直方向的滾動條爲例：

overflow-y: scroll;
整個滾動條
::-webkit-scrollbar {
    width: 5px;
}

滾動條的軌道
::-webkit-scrollbar-track {
    background-color: #ffa336;
    border-radius: 5px;
}

滾動條的滑塊
::-webkit-scorllbar-thumb {
    background-color: #ffc076;
    border-radius: 5px;
}

複製代碼

作出的滾動條以下：

IE瀏覽器自定義滾動條樣式

IE的滾動條能夠自定義的樣式相比較來講就少了許多，只能控制各個部分顯示的顏色，定製性比較低。

滾動條三角箭頭的顏色: scrollbar-arrow-color

滾動條上滾動滑塊顏色: scrollbar-face-color

滾動條軌道、按鈕背景的顏色: scrollbar-track-color

滾動框上滑塊邊框的顏色: scrollbar-shadow-color

符：控制滾動條的顯示和隱藏

上面咱們提到，設置y軸的滾動條，能夠用如下的屬性。

overflow-y: scroll;
複製代碼

可是問題來了，若是高度沒有超過必定的限制，好比當高度超過200px時顯示滾動條，當高度小於200px時隱藏滾動條，此時該怎麼作呢？你是否是想到了用js來控制？jquery演示以下：

// 判斷滾動條是否展現
  function scrollHide () {
    if ($('ul>li').length < 3) {
      $('ul').css('overflow-y','hidden')
    }
  }
複製代碼

你覺得上面的方法就解決了問題，可是...

overflow-y: auto;
複製代碼

只須要把overflow-y: scroll;變爲overflow-y: auto;就解決了上面的問題...你還在用js來控制嗎？

二十4、checkbox妙用

checkbox用的好，js代碼確定少。今天有這樣一個需求，點擊右側的箭頭（至於箭頭是怎麼用css實現的，本身google），展現所有的文字，屢次點擊能夠來回切換。原本覺得用幾行js實現如下這個效果就能夠了。細細一想，以爲有點low，仍是用css來實現吧。

第一步：DOM結構

<div class="model">
  <input class="arrow" type="checkbox" value="" />
  <p class="model-text">
    孔子曰："詩三百，思無邪。不學詩，無以言"，詩三百指的就是中國古代第一部詩歌總集《詩經》。
    《詩經》最初稱《詩》，漢武帝始稱《詩經》，收集了自西周初年到春秋中期各地的詩歌，詩的做者
    已無考，傳由尹吉普採集，孔子編選。《詩經》共計311首詩，分爲風雅頌三部分，其中6篇爲笙詩。
  </p>
</div>
複製代碼

第二部：SCSS

.model {
    width: 462px;
    margin: 10px auto 0;
    display: flex;
    justify-content: space-between;
    .model-text {
      width: 440px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      order: -1;
    }
    .arrow {
      margin-top: 4px;
      width: 0;
      height: 0;
      border-top: 12px solid #999999;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid transparent;
      cursor: pointer;
      -webkit-appearance: none;
      outline: none;
      transition: 0.2s all ease-in-out;
      transform: rotate(0);
      transform-origin: 9px 6px;

      &:checked {
        transform: rotate(180deg);
        & + .model-text {
          display: inherit;
        }
      }
    }
  }
複製代碼

這樣，在沒有js的狀況下就實現了點擊箭頭來隱藏和展現文字的效果。

總結：

input標籤要寫在p標籤的前邊，方便在css中使用+ 號選擇器，表明緊鄰在input標籤後的全部p標籤。
在使用flex的時候，p標籤要使用 order: -1;(order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。)或者使用 flex-direction: row-reverse;(row-reverse：主軸爲水平方向，起點在右端。)

二十5、讓 HTML 識別 string 裏的 '\n' 並換行

html 識別不了 '\n',只要一行代碼就能夠達到這種效果了：

white-space: pre-line;
複製代碼

二十6、徑向漸變`radial-gradient`

實現代碼

background: radial-gradient(circle at left center, transparent 4px, #ff5353 0) top left/51% 100% no-repeat, radial-gradient(circle at right center, transparent 4px, #ff5353 0) top right/51% 100% no-repeat;
複製代碼

<position>、 <shape>、 <size>、 <color-stop> 其參數：<position>、 <size>、 <color-stop>對應爲circle at left center、transparent 4px、#ff5353 0,含義爲左側的圓形，爲4px的透明色，其他地方的顏色爲#ff5353

span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 4px;
  background:
    radial-gradient(circle at left  center, transparent 4px, #ff5353 0) top left/51% 100% no-repeat,
    radial-gradient(circle at right center, transparent 4px, #ff5353 0) top right/51% 100% no-repeat;
}
複製代碼

解析：

1.border-radius: 4px將span標籤造成4px的圓角。
2.咱們指定的形狀是一個圓形circle，形狀不受外部容器尺寸影響。將整個span鋪滿。circle at left center圓心的位置在左側和垂直方向中心的位置。
3.transparent 4px圓心爲4px的透明色。
4.#ff5353爲外層的色值,漸變爲 0，即沒有過分顏色，不會從transparent過分到#ff5353,而是直接顯示#ff5353。