啊啊啊一区二区久久久,亚洲精品高清专区在线,国产AV懂色av

標(biāo)簽（空格分隔）： CSS3 前端技術(shù)胖

面試題

漸進(jìn)增強(qiáng)和優(yōu)雅降級

答：漸進(jìn)增強(qiáng)是先滿足大部分瀏覽器；優(yōu)雅降級是先滿足大部分用戶，比如目前Chrome的用戶最多，那么就把Chrome端做到最好，其它的瀏覽器再進(jìn)行適配。

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

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

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

2.1 新特性簡介

1、強(qiáng)大的CSS3選擇器
2、拋棄圖片的視覺效果
3、盒模型變化（多列布局和彈性盒模型）
4、陰影效果
5、Web字體和Web Font圖標(biāo)
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 結(jié)構(gòu)偽類選擇器

: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：選擇的元素里面沒有任何內(nèi)容

4. 偽元素

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

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

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：必需。水平陰影的位置。允許負(fù)值。

v-shadow：必需。垂直陰影的位置。允許負(fù)值。

blur：可選。模糊的距離。

color：可選。陰影的顏色。

課程Demo

Demo1：縮放動畫

效果：

圖片居中
圓角
進(jìn)入之后鼠標(biāo)編程點擊的形狀
進(jìn)入之后圖片縮放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：三角形

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

<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：畫菱形

將該屬性應(yīng)用于某個div即可
其實就是將一個正方形旋轉(zhuǎn)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：平行四邊形

將該屬性應(yīng)用于一個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：五角星

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

<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：六角星

將下面的屬性應(yīng)用于一個空的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：五邊形

將下面的屬性應(yīng)用于一個div上即可。五邊形其實就是一個三角形加一個梯形，梯形其實就是在畫三角形的時候設(shè)置一下寬度或者高度。

<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：六邊形

將下面的代碼應(yīng)用于一個空的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：心形

將下面的屬性應(yīng)用于一個div即可。其實就是兩個矩形，每個矩形的一端變成圓弧。然后向左和向右旋轉(zhuǎn)一定的角度，然后組合在一起。

<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：蛋形

將該屬性應(yīng)用于一個空的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：太極陰陽圖

將下面的屬性設(shè)置在一個空的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)品展示卡片
鼠標(biāo)移入的時候，顯示紅色邊框、圖片逐漸變透明

<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斤桃子新鮮水果包郵應(yīng)季黃金毛蜜桃當(dāng)季整箱時令甜
            </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：線性漸變

將該屬性應(yīng)用于一個空的div即可，其實和PS的線性漸變是完全一樣的。
效果就是漸變是按照一條直線進(jìn)行的。

<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：徑向漸變

效果就是一個圓形，按照半徑的方向進(jìn)行漸變。其實就是在屬性前面加上repeating，然后設(shè)定一個色標(biāo)值就可以了。

<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：重復(fù)性漸變

即將一定的漸變色標(biāo)，多次重復(fù)。其實就是

<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：必需。水平陰影的位置。允許負(fù)值。

v-shadow：必需。垂直陰影的位置。允許負(fù)值。

blur：可選。模糊距離。建議設(shè)置得大一點。

spread：可選。陰影的尺寸。

color：可選。陰影的顏色。

inset：可選。將外部陰影（outset）改為內(nèi)部陰影。

<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：過渡屬性（默認(rèn)值all）

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

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

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

transition-delay：過渡延遲時間（默認(rèn)值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：仿天貓專題過渡效果

效果

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

<div class="main">
    <ul>
        <li>
            <div class="m_title">手機(jī)館</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：仿天貓類別過渡效果

效果

鼠標(biāo)移入，鼠標(biāo)變成手指
圖片向左移動，并且有動畫效果

<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：蘋果內(nèi)嵌字體
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ū)域的情況下，可以在最后用...代替后面所有內(nèi)容。

注意

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

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

<div class="demo">
    香港特別行政區(qū)行政長官林鄭月娥7日宣布免費為全港市民進(jìn)行自愿性新冠病毒檢測，最快在兩周后實施。這本是為切斷病毒傳播鏈而做出的舉措，但黃之鋒等亂港分子們卻借此“碰瓷”，兜售起陰謀論。
</div>
<div class="demo1">
    香港特別行政區(qū)行政長官林鄭月娥7日宣布免費為全港市民進(jìn)行自愿性新冠病毒檢測，最快在兩周后實施。這本是為切斷病毒傳播鏈而做出的舉措，但黃之鋒等亂港分子們卻借此“碰瓷”，兜售起陰謀論。
</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 */
}

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS3學(xué)習(xí)筆記(技術(shù)胖)

面試題