CSS3學習筆記(技術胖)

標簽（空格分隔）： CSS3 前端技術胖

面試題

漸進增強和優(yōu)雅降級

答：漸進增強是先滿足大部分瀏覽器；優(yōu)雅降級是先滿足大部分用戶夹供，比如目前Chrome的用戶最多熊经，那么就把Chrome端做到最好桂对，其它的瀏覽器再進行適配球匕。

1. 工具杉适、網(wǎng)站

這個網(wǎng)站可以查看每個瀏覽器的CSS屬性應該加什么樣的前綴
https://caniuse.com/
查看各瀏覽器的市場份額
https://#baidu.com/research/
前綴工具packagecontrol，僅支持sublime
https://packagecontrol.io/installation
貝塞爾曲線：用于調節(jié)動畫效果
https://cubic-bezier.com/#.17,.67,.83,.67

2. CSS3新特性簡介和瀏覽器支持情況

2.1 新特性簡介

1、強大的CSS3選擇器
2氛什、拋棄圖片的視覺效果
3莺葫、盒模型變化（多列布局和彈性盒模型）
4、陰影效果
5枪眉、Web字體和Web Font圖標
6捺檬、CSS3過渡與動畫交互效果
7、媒體查詢

2.2 瀏覽器支持情況

https://#baidu.com/research/

3. 偽類

3.1 動態(tài)偽類選擇器

a:link {
    color: #666;
}
a:visited {
    color: #f00;
}
a:hover {
    color: #000;
}
a:active {
    color: #0f0;
}

3.2 狀態(tài)偽類選擇器

input:enabled {
    background-color: #0f0;
}
input:disabled {
    background-color: #f00;
}

3.3 結構偽類選擇器

:first-child：選擇某個元素的第一個子元素
:last-child：選擇某個元素最后一個子元素
:nth-child()：選擇某個元素的一個或多個特定的子元素
- n：選中所有子元素
- 2n：選中所有偶數(shù)的子元素贸铜。也可以even
- 2n+1：選中所有奇數(shù)的子元素堡纬。也可以odd
- 3：選中某個子元素
- n+5：從5開始后面所有子元素
- 4n+1：每隔三個選中一個子元素
- 注意：從1開始
:nth-last-child()：選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算
:nth-of-type()：選擇指定的元素蒿秦。就是只選擇:前的那個類型
:nth-last-of-type()：選擇指定的元素烤镐，從元素的最后一個開始計算
:first-of-type：選擇一個上級元素下的第一個同類子元素
:last-of-type：選擇一個上級元素下的最后一個同類子元素
:only-child：選擇的元素是它的父元素的唯一一個子元素
:only-of-type：選擇一個元素是它的上級元素的唯一一個相同類型的子元素
:empty：選擇的元素里面沒有任何內容

4. 偽元素

CSS偽元素用于向某些選擇器設置特殊效果

::first-letter：將特殊的樣式添加到文本的首字母
::first-line：將特殊的樣式添加到文本的首行
::before：在某元素之前插入某些內容
::after：在某元素之后插入某些內容

5. 透明

opacity：文字也會跟著透明；只能作用于讓圖片背景透明
rgba：文字并不會跟著透明棍鳖；可以放在背景炮叶、邊框上，任何用到色值的地方都可以使用

6. 動畫

animation-name：動畫名稱

animation-duration：持續(xù)時間

animation-timing-function

 - ease：慢快慢
 - linear：勻速
 - ease-in：慢快
 - ease-out：快慢
 - ease-in-out：慢快慢
 - step-start：沒有過渡
 - step-end：等duration時間后鹊杖，瞬間變化

animation-delay：延遲

animation-iteration-count：執(zhí)行次數(shù)

- infinite：無限循環(huán)

animation-direction

- normal：正常
- alternate：正著走悴灵，然后反著走扛芽，如此循環(huán)

7. 文字陰影(text-shadow)

text-shadow：h-shadow v-shadow blur color;

h-shadow：必需骂蓖。水平陰影的位置。允許負值川尖。

v-shadow：必需登下。垂直陰影的位置。允許負值叮喳。

blur：可選被芳。模糊的距離。

color：可選馍悟。陰影的顏色畔濒。

課程Demo

Demo1：縮放動畫

效果：

圖片居中
圓角
進入之后鼠標編程點擊的形狀
進入之后圖片縮放1.1倍

<img src="./images/panda.jpeg" alt="">

img {
    border-radius: 50%;
    transition: 0.5s;
    cursor: pointer;
}

body {
    text-align: center;
}
img:hover {
    transform: scale(1.1);
}

Demo2：三角形

將該屬性設置在一個div上面。
主要是通過將寬度和高度都設置為0锣咒，然后給一個大的boder侵状，留下需要保留的三角形一遍。對面的一邊寬度設置為0毅整，其余兩遍寬度一致趣兄，但是顏色設置為透明

<div class="sanjiao"></div>

border-top: 50px  solid transparent;
border-left: 0px solid #f00;
border-bottom: 50px solid transparent;
border-right: 50px solid #00f;

width: 0px;
height: 0px;
margin: 50px auto;

Demo3：對話框

將下列屬性作用于一個div即可
主要就是做出一個三角形，然后使用子絕父相的定位方式移動到父元素的左邊悼嫉。

<div class="dialog">
    Hello Everyone! I'm Panda.
</div>

.dialog {
    background-color: #6a6;
    margin-top: 50px auto;
    width: 300px;
    height: 25px;
    line-height: 25px;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
    position: relative;
    margin: 50px auto;
}
.dialog::before {
    content: '';
    border-left: 0px solid #6a6;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #6a6;
    position: absolute;
    left: -10px;
    top: 14px;
}

Demo4：畫菱形

將該屬性應用于某個div即可
其實就是將一個正方形旋轉45度角艇潭，需要注意的是transform這個屬性最好加前綴，考慮到很多瀏覽器的兼容性

<div class="diamond"></div>

.diamond {
    width: 200px;
    height: 200px;
    background-color: #6a6;
    margin: 100px auto;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Demo5：平行四邊形

將該屬性應用于一個div上
其實就是一個skew傾斜屬性，同樣需要考慮從兼容性加前綴蹋凝，然后注意skew的第一個參數(shù)是x軸傾斜鲁纠，第二個參數(shù)是y軸傾斜

<div class="parallel"></div>

.parallel {
    width: 200px;
    height: 100px;
    background-color: #6a6;
    margin: 100px auto;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -ms-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}

Demo6：五角星

將這些屬性設置在一個空的div上即可。其實就是三個三角形通過旋轉鳍寂、定位最后組合出來的形狀

<div class="star"></div>

.star {
    width: 0px;
    height: 0px;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    margin: 150px auto;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
    position: relative;
}
.star::before {
    content: '';
    width: 0px;
    height: 0px;
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: -45px;
    left: -65px;
}
.star::after {
    content: '';
    width: 0px;
    height: 0px;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    position: absolute;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    transform: rotate(-70deg);
    top: -3px;
    left: -105px;
}

Demo7：六角星

將下面的屬性應用于一個空的div即可房交。其實就是一個向上的三角形，一個向下的三角形的組合伐割。

<div class="star"></div>

.star {
    width: 0px;
    height: 0px;
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: relative;
}
.star::after {
    content: '';
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: absolute;
    top: 30px;
    left: -50px;
}

Demo8：五邊形

將下面的屬性應用于一個div上即可候味。五邊形其實就是一個三角形加一個梯形，梯形其實就是在畫三角形的時候設置一下寬度或者高度隔心。

<div class="wubian"></div>

.wubian {
    width: 54px;
    height: 0px;
    margin: 100px auto;
    border-top: 50px solid red;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    position: relative;
}
.wubian::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 35px solid red;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    top: -85px;
    left: -18px;
}

Demo9：六邊形

將下面的代碼應用于一個空的div即可白群。其實就是兩個三角形和一個矩形的組合。

<div class="six"></div>

.six {
    width: 100px;
    height: 55px;
    margin: 100px auto;
    background-color: red;
    position: relative;
}
.six::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 25px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top: -25px;
}
.six::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 25px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top: 55px;
}

Demo10：心形

將下面的屬性應用于一個div即可硬霍。其實就是兩個矩形帜慢，每個矩形的一端變成圓弧。然后向左和向右旋轉一定的角度唯卖，然后組合在一起粱玲。

<div class="heart"></div>

.heart {
    width: 100px;
    height: 90px;
    position: relative;
    margin: 100px auto;
    /* background-color: #ff0; */
}
.heart::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 80px;
    background-color: red;
    border-radius: 50px 40px 0 0;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 50px;
}
.heart::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 80px;
    background-color: red;
    border-radius: 50px 40px 0 0;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 0px;
}

Demo11：蛋形

將該屬性應用于一個空的div上，其實就是給矩形畫不同的圓角拜轨。border-radius中/前表示四個角的x軸抽减，/后表示四個角的y軸。

<div class="egg"></div>

.egg{
    width: 126px;
    height: 180px;
    background-color: #fa3;
    margin: 100px auto;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Demo12：太極陰陽圖

將下面的屬性設置在一個空的div即可橄碾。其實就是一個圓卵沉，一半黑，一半白法牲。然后分別一個中心黑外邊白和一個中心白外邊黑的圓分別放到上面和下面史汗。

<div class="taiji"></div>

body {
    background-color: #ccc;
}
.taiji {
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-radius: 50%;
    background-color: white;
    border-left: 150px solid black;
    position: relative;
}
.taiji::before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid black;
    background-color: #fff;
    left: -75px;
    top: 0px;
}
.taiji::after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid white;
    background-color: #000;
    left: -75px;
    bottom: 0;
}

Demo13：透明

效果

透明文字層在圖片上面
有陰影
居中

<div class="background">
    <div class="content">
        Hello everyone! I'm Panda.<br/>
        Hello everyone! I'm Panda.<br/>
        Hello everyone! I'm Panda.<br/>
        Hello everyone! I'm Panda.<br/>
        Hello everyone! I'm Panda.<br/>
        Hello everyone! I'm Panda.<br/>
    </div>
</div>

.background {
    margin: 100px auto;
    width: 800px;
    height: 291px;
    background-image: url('./img/aa.jpg');
    position: relative;
}
.content {
    position: absolute;
    width: 400px;
    height: 200px;
    background-color: #fff;
    opacity: 0.8;
    top: 45px;
    left: 200px;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    -webkit-box-shadow: 3px 3px 5px #888;
    box-shadow: 3px 3px 5px #888;
}

Demo14：天貓案例——mouseover高亮

效果：

天貓的產(chǎn)品展示卡片
鼠標移入的時候，顯示紅色邊框拒垃、圖片逐漸變透明

<div class="main">
    <ul>
        <li>
            <div class="img">
                <img src="./img/danta.png" alt="">
            </div>
            <div class="goods_title">
                展藝葡式蛋撻皮102個裝 烘焙家用材料套餐帶錫底半成品酥皮塔殼液
            </div>
            <div class="price">$499</div>
        </li>
        <li>
            <div class="img">
                <img src="./img/huangtao.png" alt="">
            </div>
            <div class="goods_title">
                碭山錦繡黃桃10斤桃子新鮮水果包郵應季黃金毛蜜桃當季整箱時令甜
            </div>
            <div class="price">$499</div>
        </li>
    </ul>
</div>

body {
    background-color: #ddd;
}
.main {
    margin: 100px auto;
    width: 800px;
    clear: both;
}
.main li {
    background-color: #fff;
    list-style: none;
    width: 240px;
    padding: 1px;
    border: 1px solid rgba(255,0,0,0);
    cursor: pointer;
    float: left;
    margin: 3px;
}
.main li:hover {
    border: 1px solid rgba(255,0,0,1)
}
.main li:hover .img img{
    opacity: 0.7;
}
.img img {
    width: 240px;
    transition: all 0.5s;
}
.goods_title {
    margin: 10px;
    color: #666;
    height: 41px;
    overflow: hidden;
}
.price {
    margin: 10px;
    color: red;
}

Demo15：線性漸變

將該屬性應用于一個空的div即可停撞，其實和PS的線性漸變是完全一樣的。
效果就是漸變是按照一條直線進行的悼瓮。

<div class="ceng"></div>

.ceng {
    width: 260px;
    height: 200px;
    border: 1px solid black;
    background-image: linear-gradient(to right,orange, green, red);
    background-image: -webkit-linear-gradient(to right,orange, green, red);
    background-image: -o-linear-gradient(to right,orange, green, red);
}

Demo16：徑向漸變

效果就是一個圓形戈毒，按照半徑的方向進行漸變。其實就是在屬性前面加上repeating谤牡，然后設定一個色標值就可以了副硅。

<div class="ceng circle"></div>
<div class="ceng ellipse"></div>

.ceng {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50%;
    margin: 10px;
    float: left;
}
.circle {
    background-image: radial-gradient(20px circle at center, orange, green, red);
}
.ellipse {
    background-image: radial-gradient(20px 30px ellipse at center,orange, green, red);
}

Demo17：重復性漸變

即將一定的漸變色標，多次重復翅萤。其實就是

<div class="ceng"></div>
<div class="cicle"></div>

.ceng {
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background-image: repeating-linear-gradient(red 0px, green 40px, orange 80px);
}
.cicle {
    width: 300px;
    height: 300px;
    margin: 20px auto;
    border-radius: 50%;
    background-image: repeating-radial-gradient(red 0px, green 30px, orange 40px);
}

Demo18：盒子陰影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需恐疲。水平陰影的位置腊满。允許負值。

v-shadow：必需培己。垂直陰影的位置碳蛋。允許負值。

blur：可選省咨。模糊距離肃弟。建議設置得大一點。

spread：可選零蓉。陰影的尺寸笤受。

color：可選。陰影的顏色敌蜂。

inset：可選箩兽。將外部陰影（outset）改為內部陰影。

<div class="ceng rotate_left">
    <img src="./img/a1.jpg" alt="">
    <p>fafafafaf     fafafafafafafafefae</p>
</div>
<div class="ceng rotate_right">
    <img src="./img/a2.jpg" alt="">
    <p>fafafafaf     fafafafafafafafefae</p>
</div>

body {
    background-color: white;
}
.ceng {
    width: 294px;
    padding: 10px 10px 20px 10px;
    border: 1px solid #BFBFBF;
    background-color: white;
    box-shadow: 2px 3px 20px #aaa;
}
.ceng img{
    width: 294px;
}
.rotate_left {
    float: left;
    -webkit-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    transform: rotate(7deg);
}
.rotate_right {
    float: left;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

Demo19：過渡效果

效果：

讓一個正方形緩慢過渡變成長方形

transition

transition-property：過渡屬性（默認值all）

transition-duration：過渡持續(xù)時間（默認值0s）

transition-timing-function：過渡函數(shù)（默認值為ease函數(shù)）

 - ease：慢快慢
 - linear：勻速
 - ease-in：慢快
 - ease-out：快慢
 - ease-in-out：慢快慢
 - step-start：沒有過渡
 - step-end：等duration時間后章喉，瞬間變化

transition-delay：過渡延遲時間（默認值0s）

<div class="ceng"></div>

.ceng {
    width: 100px;
    height: 100px;
    background-color: pink;
    cursor: pointer;
    transition-duration: 1s;
    transition-property: width height;
    transition-delay: 0.2s;
    transition-timing-function: ease;
}
.ceng:hover {
    width: 300px;
    height: 150px;
    background-color: red;
    border-radius: 40px;
}

Demo20：仿天貓專題過渡效果

效果

圖片為透明背景
鼠標放上去會自動縮放變大汗贫，并且有過渡動畫
背景是一個用純灰色制成的圓形

<div class="main">
    <ul>
        <li>
            <div class="m_title">手機館</div>
            <div class="m_content">R9s Plus 黑色版首發(fā)</div>
            <div class="m_img"><img src="./img/a1.jpg" alt=""></div>
        </li>
    </ul>
</div>

* {
    padding: 0px;
    margin: 0px;
    font-family: 'Microsoft YaHei';
}
.main {
    margin: 10px auto;
    width: 260px;
    border: 1px solid #ccc;
    text-align: center;

}
.main img {
    width: 260px;
}
.main li {
    list-style: none;
    cursor: pointer;
}
.m_title {
    font-size: 20px;
    font-weight: bold;
    margin: 5px;
}
.m_content {
    color: #666;
    margin-bottom: 15px;
}
.m_img {
    position: relative;
    padding: 30px;
}
.m_img::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    background-color: #eee;
    border-radius: 50%;
    z-index: -1;
    left: 35px;
    top: 10px;
}
.m_img img {
    transform: scale(1);
    transition: all 1s;
}
.main li:hover .m_img img {
    transform: scale(1.1);
}

Demo21：仿天貓類別過渡效果

效果

鼠標移入，鼠標變成手指
圖片向左移動秸脱，并且有動畫效果

<div class="main">
    <div class="m_title">好車特賣一口價</div>
    <div class="m_content">新年 新車 開回家</div>
    <div class="m_img"><img src="./img/aa.png" alt=""></div>
</div>

.main {
    width: 260px;
    height: 270px;
    border: 1px solid #ccc;
    margin: 50px auto;
    font-family: 'Macrosoft YaHei';
    cursor: pointer;
}
.m_title {
    text-align: left;
    font-weight: bold;
    font-size: 20px;
    padding: 20px 10px 10px 10px;
}
.m_content {
    color: #11ccaa;
    padding: 0px 10px 10px 10px;
}
.m_img {
    text-align: right;
    position: relative;
}
.m_img img {
    position: absolute;
    width: 180px;
    top: 0px;
    right: 0px;
    transition: all 0.3s;
}
.main:hover img {
    right: 15px;
}

Demo22：動畫-口字循環(huán)

<div class="rect"></div>

.rect {
    width: 100px;
    height: 100px;
    background-color: red;
    position: fixed;
    animation: mymove 2s infinite;
}
@keyframes mymove {
    0% { top: 0; left: 20%; background-color: red; }
    25% { top: 0; left: 80%; background-color: blue; }
    50% { top: 80%; left: 80%; background-color: green; }
    75% { top: 80%; left: 20%; background-color: black; }
    100% { top: 0; left: 20%; background-color: red; }
}

Demo23：Loading-波浪長條條

效果

每一根豎條一次變長

<div class="spinner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.spinner {
    margin: 100px auto;
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 10px;
}
.spinner > div {
    background-color: #67cf22;
    height: 100%;
    width: 6px;
    height: 100%;
    display: inline-block;
    animation: mymove 1.2s infinite ease-in-out;
}
.spinner >div:nth-child(2){
    animation-delay: -1.1s;
}
.spinner >div:nth-child(3){
    animation-delay: -1.0s;
}
.spinner >div:nth-child(4){
    animation-delay: -0.9s;
}
.spinner >div:nth-child(5){
    animation-delay: -0.8s;
}
@keyframes mymove {
    0%,40%,100% {transform: scaleY(0.4);}
    20% {transform: scaleY(1);}
}

Demo24：Loading-圓圈冒冒冒

效果：

兩個綠色的小圓圈落包，不停地變大縮小
它們之間有一個小小的時差，所以摊唇，可以錯開放大和縮小

<div class="spinner">
    <div></div>
    <div></div>
</div>

.spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 100px auto;
}
.spinner > div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #67cf22;
    opacity: 0.6;
    position: absolute;
    top: 0px;
    left: 0px;
    animation: mya 2.0s infinite ease-in-out;
}
.spinner > div:nth-child(2){
    animation-delay: -1s;
}
@keyframes mya {
    0%,100% { transform: scale(0.0); }
    50% { transform: scale(1.0); }
}

Demo25：文字陰影做特殊字體

效果

font1：文字外發(fā)光
font2：蘋果內嵌字體
font3：3D字體

<div class="font1">Panda</div>
<div class="font2">APPLE SYSTEM</div>
<div class="font3">3D TEXT EFFECT</div>

body {
    background-color: #666;
    text-align: center;
    font: bold 55px "Microsoft YaHei";
}
.font1 {
    color: #fff;
    text-shadow: 0px 0px 20px red;
}
.font2 {
    color: #000;
    text-shadow: 0px 1px 1px #fff;
}
.font3 {
    color: #fff;
    text-shadow: 1px 1px rgba(197, 223, 248, 0.8),
                 2px 2px rgba(197, 223, 248, 0.8),
                 3px 3px rgba(197, 223, 248, 0.8),
                 4px 4px rgba(197, 223, 248, 0.8),
                 5px 5px rgba(197, 223, 248, 0.8),
                 6px 6px rgba(197, 223, 248, 0.8);
}

Demo26：文字溢出(text-overflow)

效果

文字多于顯示區(qū)域的情況下咐蝇，可以在最后用...代替后面所有內容。

注意

text-overflow: clip;overflow: hidden; 需要一起使用遏片，并且效果和overflow: hiden;完全相同

text-overflow: ellipsis; overflow: hidden;white-space: nowrap;需要一起使用

<div class="demo">
    香港特別行政區(qū)行政長官林鄭月娥7日宣布免費為全港市民進行自愿性新冠病毒檢測嘹害，最快在兩周后實施撮竿。這本是為切斷病毒傳播鏈而做出的舉措吮便，但黃之鋒等亂港分子們卻借此“碰瓷”，兜售起陰謀論幢踏。
</div>
<div class="demo1">
    香港特別行政區(qū)行政長官林鄭月娥7日宣布免費為全港市民進行自愿性新冠病毒檢測髓需，最快在兩周后實施。這本是為切斷病毒傳播鏈而做出的舉措房蝉，但黃之鋒等亂港分子們卻借此“碰瓷”僚匆，兜售起陰謀論。
</div>

.demo {
    margin: 30px auto;
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    height: 50px;
    text-overflow: clip;
    overflow: hidden;
}
.demo1 {
    margin: 30px auto;
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Demo27：長度單位

<div>Hello Panda!</div>
<h1>Hello Panda!</h1>

html {
    font-size: 62.5%;
}
body {
    font-size: 1.4rem; /* 14px */
}
h1 {
    font-size: 2.4rem; /* 24px */
}