保姆級教程 CSS 知識點梳理大全，超詳細！！！-有解無憂

保姆級教程 CSS 知識點梳理大全，超詳細！！！

??大家好,我是王同學，好久不見，趁著假期王同學把CSS 知識點梳理了一遍
??如果對你有幫助就給我點個贊吧，這樣我們就互不相欠了
??星光不負趕路人，所有的幸運都來自于堅持不懈的努力，大家一起加油吧

一、前端三層

在這里插入圖片描述

二、CSS的書寫位置

(一)、內嵌式

內嵌式，顧名思義，內嵌在.html檔案中
在<head></head>標簽中，書寫 <style></style>標簽對，里面書寫CSS陳述句，

在這里插入圖片描述

(二)、外鏈式

可以將CSS單獨存為.css檔案，然后用link標簽引入它
外鏈式的優點：多個HTML檔案，可以共用一個CSS樣式表檔案

在這里插入圖片描述

(三)、匯入式

匯入式是最不常見的樣式表匯入方法,使用匯入式引入檔案，不會等待CSS檔案加載完畢，而是會立即渲染HTML結構

在這里插入圖片描述

(四)、行內式

行內式：樣式可以直接通過style屬性寫在標簽上，行內式犧牲了樣式表的批量設定樣式的能力，只能給一個標簽設定樣式，所以不常用，
在這里插入圖片描述

三、CSS選擇器

首先我們來介紹傳統的CSS2.1 選擇器

（一）、標簽選擇器

標簽選擇器：又稱元素選擇器，型別選擇器，它直接使用元素的標簽名當做選擇器，將選擇頁面上所有的標簽

在這里插入圖片描述

標簽選擇器將選擇頁面上所有該種標簽，無論這個標簽所處位置的深淺

請添加圖片描述
標簽選擇器的覆寫面非常大，所以通常用于標簽的初始化
在這里插入圖片描述

在這里插入圖片描述

（二）、id選擇器

標簽可以有id屬性，它是這個標簽的唯一標識
id的命名只能由字母、數字、下劃線、短橫線構成，且不能以數字開頭，字母區分大小寫，但習慣上一般為小寫字母
同一個頁面上不能有相同的id標簽
CSS選擇器可以使用#井號選擇指定的id標簽

在這里插入圖片描述

（三）、類選擇器

class屬性表示類名
類名的命名規范和id的命名規范相同
我們使用點.前綴來指定class的標簽
class類名十分靈活，多個標簽可以為相同的類名
同一個標簽可以同時屬于多個類，類名用空格隔開

在這里插入圖片描述

在開發中我們也用到過原子類，這里簡單的介紹一下

（四）、原子類

在做網頁前、可以將所有的常用字號、文字顏色、行高、外邊距、內邊距等都設定為單獨的類，
在HTML標簽就可以“則需選擇”它的類名，這樣可以非常快速的添加一些常見的樣式

請添加圖片描述

在這里插入圖片描述

<style>
        .fs18 {
            font-size: 18px;
        }
        
        .fs20 {
            font-size: 20px;
        }
        
        .fs22 {
            font-size: 22px;
        }
        
        .fs24 {
            font-size: 24px;
        }
        
        .fs26 {
            font-size: 26px;
        }
        
        .color-blue {
            color: blue;
        }
        
        .color-red {
            color: red;
        }
        
        .color-orange {
            color: orange;
        }
        
        .color-pink {
            color: pink;
        }
        
        .color-purple {
            color: purple;
        }
    </style>
</head>

<body>
    <p class="fs18 color-blue">好好學習 天天向上</p>
    <p class="fs20 color-red">好好學習 天天向上</p>
    <p class="fs22 color-orange">好好學習 天天向上</p>
    <p class="fs24 color-pink">好好學習 天天向上</p>
    <p class="fs26 color-purple">好好學習 天天向上</p>

</body>

在這里插入圖片描述

（五）、復合選擇器

在這里插入圖片描述

后代選擇器

在這里插入圖片描述

交集選擇器

在這里插入圖片描述

并集選擇器

并集選擇器也叫做分組選擇器，逗號表示分組

在這里插入圖片描述

（六）、偽類選擇器

偽類是添加到選擇器的描述性詞語，指定要選擇的元素的特殊狀態，超級鏈接擁有4個特殊的狀態
在這里插入圖片描述

a 標簽的偽類書寫，要按照“愛恨準則”的順序，否則會有偽類不生效的問題

在這里插入圖片描述

    <style>
        a:link {
              color: rgb(255, 0, 242);
        }
        
        a:visited {
            color: red;
        }
        
        a:hover {
            color: pink;
        }
        
        a:active {
            font-size: 40px;
            color: green;
        }
    </style>
</head>

<body>
    <p>
        <a href="http://www.baidu.com"> 百度</a>
    </p>
    <p>
        <a href=" http://www.jd.com"> 京東</a>
    </p>
    <p>
        <a href="http://www.taobao.com"> 淘寶</a>
    </p>
    <p>
        <a href="http://www.jd.com"> 慕課</a>
    </p>
</body>

![在這里插入圖片描述](https://img-blog.csdnimg.cn/866c6e88022c4c288f3ee78a8b74c6e0.png?x-oss-process=image/watermark,type_ZHJ

（七）、元素關系選擇器

在這里插入圖片描述

（七）、子選擇器

當使用 >符號分隔兩個元素時，它只會匹配那些作為第一個元素的直接后代元素，即兩個標簽為父子關系

在這里插入圖片描述

（八）、相鄰兄弟選擇器

相鄰兄弟選擇器（+）介于兩個選擇器之間，當第二個元素緊跟著第一個元素之后，并且兩個元素都是屬于同一個父元素的子元素，則第二個元素將被選中，
說白了，a+b就是選擇緊跟在a后面的一個b

(九）、通用兄弟選擇器（~）

通用兄弟選擇器（~）,a~b選擇a元素之后所有同層級b元素請添加圖片描述

（十）、序號選擇器

（十一）、：first-child

first-child表示選擇第一個子元素，比如下面的例子就是表示選擇.box盒子中的第一個p
在這里插入圖片描述

(十二)、：last-child

：last-child表示選擇最后一個子元素，比如下面的例子
在這里插入圖片描述

（十二）、： nth-child()

： nth-child()可以選擇任意序號的子元素
在這里插入圖片描述
：nth-child()可以寫成 an+b的形式，表示從b開始每個a選一個

在這里插入圖片描述

 <style>
        .box p:first-child {
            color: red;
        }
        
        .box p:last-child {
            color: aqua;
        }
        
        .box p:nth-child(3) {
            color: orange;
        }
        
        .box p:nth-child(2n) {
            color: pink;
        }
        
        .box1 p:nth-child(2n+1) {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </div>
    <div class="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </div>

在這里插入圖片描述

（十三）、序號選擇器的兼容性

在這里插入圖片描述

（十四）、屬性選擇器

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        [alt]  有這個屬性
        [alt ="背景故宮"] 精準匹配
        [alt ^="abc"] 開頭位置匹配
        [alt $="abc"]  結尾位置匹配
        [alt *="abc"]  任意位置匹配
        [alt |="abc"]    abc-開頭
        [alt ~="abc"]  abc為空格分開的獨立部分
        
        */
        
        img {
            width: 300px;
        }
        
        img[alt^="北京"] {
            border: 5px solid purple;
        }
        
        img[alt$="夜景"] {
            border: 5px solid rgb(236, 184, 12);
        }
        
        img[alt*="美"] {
            border: 5px solid rgb(52, 5, 138);
        }
        
        img[alt |="參賽作品"] {
            border: 5px solid rgb(224, 228, 9);
        }
        
        img[alt~="手機拍攝"] {
            border: 5px solid pink;
        }
    </style>
</head>

<body>
    <img src="images/bj/0.jpg" alt="北京故宮">
    <img src="images/bj/1.jpg" alt="北京鳥巢">
    <img src="images/bj/2.jpg" alt="北京十七孔橋">


    <img src="images/wx/0.jpg" alt="參賽作品-無錫體育場">
    <img src="images/wx/1.jpg" alt="手機拍攝 無錫太湖">
    <img src="images/wx/2.jpg" alt="無錫美景">
    <img src="images/wx/3.jpg" alt="無錫夜景">

</body>

</html>

在這里插入圖片描述

（十五）、CSS3新增偽類

在這里插入圖片描述

（十六）、偽元素

CSS3新增了偽元素特性，顧名思義，表示虛擬動態創建的元素
偽元素用雙冒號表示，IE8可以兼容單冒號

：：before

：：after

請添加圖片描述

在這里插入圖片描述

（十七）、：：selection

在這里插入圖片描述

（十八）、：：first-letter和：：first-line

在這里插入圖片描述

三、層疊性和選擇器權重的計算

CSS全名叫做“層疊樣式表”，層疊性是他很重要的性質
層疊性：多個選擇器可以同時作用于同一個標簽，效果疊加

如果多個選擇器的定義有沖突呢？CSS有嚴密的處理規則

在這里插入圖片描述

復雜選擇器的計算

復雜選擇器可以通過（ID的個數，class的個數，標簽的個數）的形式，計算權重
請添加圖片描述
在這里插入圖片描述

四、文本與字體屬性

（一）、常用的文本字體屬性

color屬性可以設定文本內容的前景色
color屬性主要用于英語單詞、十六進制、rgba()、rgb() 等表示方法
用英語單詞表示法，比如：color：red；僅僅用于學習時臨時設定一下顏色，作業時不用這樣的形式，因為追求精確，

（二）、十六進制表示法

十六進制表示法是所有設計軟體中常用的顏色表示方法，設計師給我們的設計上面標注的圖示顏色，通常為十六進制
在這里插入圖片描述

在這里插入圖片描述

（三）、rgb() 表示法

在這里插入圖片描述

（四）、rgba()表示法

顏色可以使用rgba（）表示法，最后一個引數表示透明度，介于0-1之間，0表示純透明，1表示純實心

（五）、font-size屬性

font-size屬性用來設定字號，單位為px 后面還會說到em和rem

網頁文字正文字號通常是16px瀏覽器最小支持10px
在這里插入圖片描述

（六）、font-weight屬性

font-weight屬性設定字體的粗細程度，通常就用normal和bold兩個值

（七）、font-style屬性

作用：設定文字的傾斜

在這里插入圖片描述

（八）、text-decoration屬性

text-decoration屬性用于設定文本的修飾外觀的（下劃線，洗掉線）
在這里插入圖片描述

（九）、font-family屬性

font-family屬性用于設定字體的屬性
字體可以是串列的形式，一般英語字體放到前面，后面的字體是前面的字體的后備字體
字體名稱中有空格，必須要用引號來包裹

font-family：" 微軟雅黑";
font-family: serif,"Times New Roman","微軟雅黑";

在這里插入圖片描述

中文字體也可以稱呼他們的名字

字體通常必須是用戶計算機中已經安裝好的字體，所以一般來說設定為微軟雅黑和宋體的較多，設定成其他字體的較少
在這里插入圖片描述

問題一：如何設定為用戶電腦中沒有的字體呢？那就必須自己定義新的字體，這就需要我們有字體檔案，當用戶加載網頁的時候，會同時下載這些字體

定義字體，當我們擁有以下字體檔案之后，就可以使用@font-face定義字體

在這里插入圖片描述

（十）、阿里巴巴貧訓體

阿里巴巴提供了一套免費商用授權的貧訓字體，網址 https://www.iconfont.cn/webfont#!/webfont/index

使用阿里巴巴貧訓字體也省去了下載的麻煩
在這里插入圖片描述

使用步驟：

下載字體—使用font-face宣告字體—定義使用 webfont 的樣式—為文字加上對應的樣式

第一步：下載字體

在這里插入圖片描述

第二步：使用font-face宣告字體（注意：在參考的時候要注意參考的路徑哦）

在這里插入圖片描述

第三步：定義使用 webfont 的樣式

在這里插入圖片描述

第四步：為文字加上對應的樣式

在這里插入圖片描述

（十一）、text-indent屬性

在這里插入圖片描述

（十二）、 line-height行高

line-height屬性的單位可以是px為單位的數值

line-height：30px;

line-height屬性的單位可以是沒有單位是數值，表示字號的倍數，這是最推薦的寫法

line-height：1.5;

line-height屬性也可以是百分數，表示字號的倍數

line-height：150%;

在這里插入圖片描述

（十三）、單行文本垂直居中

行高等于盒子的高度，設定單行文本垂直居中對齊
在這里插入圖片描述
設定text-align：center，即可實作文本水平居中

在這里插入圖片描述

（十四）、font合寫屬性

在這里插入圖片描述

（十五）、繼承性

文本相關的屬性普遍具有繼承性，只需要給祖先標簽設定，即可在后代所有的標簽中生效，
因為文字相關的屬性都有繼承性，所以通常會設定body標簽的字號、顏色、行高等、這樣就能當做整個網頁的默認樣式了，

在這里插入圖片描述

（十五）、繼承性的就近原則

在繼承的情況下，選擇器權重計算失效，就近原則
在這里插入圖片描述

在這里插入圖片描述

五、盒子模型

（一）、什么是盒子模型

所有的HTML標簽都可以看成矩形盒子，由width，height，padding、border構成，稱為盒子模型

在這里插入圖片描述

（二）、width屬性

width屬性表示盒子內容的寬度
width屬性的單位通常是px，移動端開發也會涉及到百分數、rem等單位
當塊級元素（div 、h系列、li等）沒有設定width屬性時，它將自動撐滿，但這并不意味著width可以繼承

（三）、height屬性

height屬性表示盒子內容的高度
height屬性的單位通常是px，移動端開發也會涉及到百分數、rem等單位
盒子的height屬性如果不設定的話，它將自動被內容撐開，如果沒有內容，默認是0

在這里插入圖片描述

（四）、padding屬性詳解

padding屬性是盒子的內邊距，即盒子邊框內壁到文字的距離
padding屬性如果用四個數值以空格隔開進行設定，分別表示上、右、下、左的padding
padding屬性如果用數值以空格隔開進行設定，分別表示上、左右、下的padding
padding屬性如果要用二個數值以空格隔開進行設定，分別表示上下、左右的padding

在這里插入圖片描述

（五）、margin屬性詳解

margin是盒子的外邊距，即盒子與其他盒子的距離
在這里插入圖片描述

margin的塌陷問題

豎直方向的margin有塌陷的現象：小的margin會塌陷到大的margin中，從而margin不疊加，只以大值為準

請添加圖片描述

（六）、一些元素有默認的margin

一些元素（比如body、ul、p等)都有默認的margin，在開始制作網頁的時候，要將他們清除

在這里插入圖片描述

（七）、盒子的水平居中

將盒子的左右兩邊的margin都設定為0，盒子將水平居中
文本居中是text-align：center; 和盒子水平居中是兩個概念
盒子的垂直居中我們需要使用絕對定位來實作后面我們細說
在這里插入圖片描述

（八）、盒模型的計算

在這里插入圖片描述

（九）、box-sizing屬性

給盒子添加了box-sizing：border-box屬性之后，盒子的width、height數字就表示盒子實際占有的寬高（不包含margin）了，即padding、border變為內縮，不再外擴，

box-sizing屬性大量用于移動網頁的制作中，因為它結合百分比布局，彈性布局等非常好用，在PC頁面中使用較少，
在這里插入圖片描述

（十）、行內元素和塊級元素

在這里插入圖片描述

（十一）、行內塊

img和表單元素是特殊的行內塊，他們既能設定寬度和高度，也能夠并排顯示

在這里插入圖片描述

（十二）、行內元素和塊級元素的相互轉換

使用display：block；可以將元素轉換為塊級元素
使用display：inline；可以將元素轉換為行內元素，將元素轉換為行內元素的不多見
使用display：inline-block；可以將元素轉換為行內塊元素

（十三）、元素的隱藏

使用display：none；可以將元素隱藏，元素將徹底放棄位置，如同沒有寫它的標簽一樣
使用visibility：hidden；也可以將元素隱藏，但是元素不放棄自己的位置

在這里插入圖片描述

六、浮動與定位

（一）、浮動

浮動的本質：用來實作并排的效果
浮動使用的要點：要浮動，并排的盒子都實作浮動
父盒子要有足夠的寬度，否則子盒子會掉下去

在這里插入圖片描述

（二）、浮動的順序貼靠特性

子盒子會按順序進行貼靠，如果沒有足夠的空間，則會尋找前一個兄弟元素

如下圖所示：3號盒子會掉到2號盒子的下面

在這里插入圖片描述

（三）、浮動的元素一定能設定寬高

浮動的元素不再區分塊級元素、行內元素、已經脫離了標準檔案，一律能夠設定寬度和高度，即使他是a標簽或span標簽

在這里插入圖片描述

（四）、右浮動

在這里插入圖片描述

（五）、使用浮動的注意事項

垂直顯示的盒子，不要設定浮動、只有并排顯示的盒子才要設定浮動
“大盒子帶著小盒子跑”，一個大盒子中、又是一個小天地，內部可以繼續使用浮動
div是免費的，不要節約盒子

（六）、BFC規范

BFC規范（Box-Formatting Context 塊級格式化背景關系）是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然

觀察下面的例子

在這里插入圖片描述

出現以上問題的原因

一個盒子不設定height，當內容子元素都浮動時，無法撐起自身
這個盒子沒有形成BFC

解決辦法

在這里插入圖片描述

（七）、如何創建BFC？

在這里插入圖片描述

（七）、清除浮動

清除浮動：浮動一定要封閉到一個盒子中，否則會對頁面后續元素產生影響

舉例說明

在這里插入圖片描述

來猜一下頁面中會出現什么樣的效果？

大家應該都會說兩行兩列？然而沒有清除浮動就成行顯示了！出現以下這種情況是沒有清除浮動

在這里插入圖片描述

清除浮動的方法一：

在這里插入圖片描述

清除浮動的方法二：

在這里插入圖片描述
使用方法二的副作用：margin會失效

清除浮動的方法三：

在這里插入圖片描述

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .clearfix::after {
            content: '';
            clear: both;
            display: block;
        }
        
        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-right: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>

    <div class="clearfix">
        <p></p>
        <p></p>
    </div>

清除浮動的方法四：

在這里插入圖片描述

（八）、相對定位

相對定位：盒子可以相對自己原來的位置進行位置調整，稱為相對定位

在這里插入圖片描述

位置詞描述：值可以是負數，即往規定方向相反移動

在這里插入圖片描述
相對定位的性質：相對定位的元素，會在老家留坑，本質上任然是在原來的位置，只不過渲染在新的地方而已，渲染的圖形可以比喻成影子，不會對頁面元素產生任何影響，

（九）、相對定位的用途

相對定位用來微調元素位置
相對定位的元素，可以當做絕對定位的參考盒子

（十）、絕對定位

絕對定位：盒子可以在瀏覽器中以坐標進行位置精準描述，擁有自己的絕對位置

在這里插入圖片描述

絕對定位的位置描述詞

在這里插入圖片描述

絕對定位的元素脫離標準檔案流

絕對定位的元素脫離標準檔案流，將釋放自己的位置，對其他元素不會產生任何干擾，而是對他們進行壓蓋

絕對定位的參考盒子

絕對定位的盒子并不是永遠以瀏覽器作為基點
絕對定位的盒子會以自己祖先元素中，離自己最近的擁有定位屬性的盒子，當做基準點，這個盒子通常是相對定位的，所以這個性質也叫做子絕父相

絕對定位的盒子垂直居中

絕對定位的盒子垂直居中是一個非常實用的技術
在這里插入圖片描述

在這里插入圖片描述

堆疊順序 z-index屬性

z-index屬性是一個沒有單位的正整數，數值大的能夠壓住數值小的

在這里插入圖片描述

（十一）、絕對定位脫離標準檔案流

絕對定位的元素脫離標準檔案流，將釋放自己的位置，對其他元素不會產生任何干擾，而是對他們進行壓蓋

脫離標準檔案流的方法：浮動、絕對定位、固定
定位

（十二）、絕對定位的用途

絕對定位用來制作壓蓋、遮罩的效果
絕對定位用來結合CSS精靈使用
絕對定位可以結合JS實作影片

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .carousel {
            position: relative;
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 40px auto;
        }
        
        .carousel .btn {
            position: absolute;
            width: 40px;
            height: 40px;
            margin-top: -20px;
            top: 50%;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            background-color: rgba(255, 255, 255, .5);
            /* 滑鼠變為小手狀態 */
            cursor: pointer;
            font-size: 26px;
            font-family: consolas;
        }
        
        .carousel .btn:hover {
            background-color: gold;
            color: #fff;
        }
        
        .carousel .leftbtn {
            left: 10px;
        }
        
        .carousel .rightbtn {
            right: 10px;
        }
        
        .carousel ol {
            position: absolute;
            width: 120px;
            height: 20px;
            right: 20px;
            bottom: 20px;
            list-style: none;
        }
        
        .carousel ol li {
            float: left;
            width: 20px;
            height: 20px;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .carousel ol li.current {
            background-color: gold;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <img src="images/bj/0.jpg" alt="">
        <a class="leftbtn btn"> &lt;</a>
        <a class="rightbtn btn">&gt;</a>
        <ol>
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>

    </div>
</body>

</html>

（十一）、固定定位

固定定位：不管頁面如何滾動、他都永遠固定在那里

固定定位脫離標準檔案流
在這里插入圖片描述

固定定位的用途：“回傳頂部”、“樓層導航”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: fixed;
            width: 100px;
            height: 100px;
            right: 0;
            bottom: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>





</body>

</html>

在這里插入圖片描述

（七）、邊框與圓角

（一）、border屬性的三要素

在這里插入圖片描述

（二）、線型

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            border: 3px solid #000;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            border: 3px dotted #000;
            margin: 20px 0;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            border: 3px dashed #000;
        }
        
        </style
    </style>
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

在這里插入圖片描述

（三）、邊框的三要素小屬性

在這里插入圖片描述

（四）、四個方向的邊框

在這里插入圖片描述

（五）、四個方向邊框的三要素小屬性

在這里插入圖片描述

（六）、去掉邊框

border-left：none；屬性可以去掉左邊框，以此類推

（七）、利用邊框制作三角形

在這里插入圖片描述

（八）、圓角

border-radius屬性的值通常為px單位，表示圓角的半徑

 border-radius:10px

在這里插入圖片描述

單獨設定四個圓角

在這里插入圖片描述

圓角也可以用百分比為單位

border-radius屬性的值也可以用百分比為單位，表示圓角起始于每條邊的哪里

在這里插入圖片描述

（九）、盒子陰影—box-shadow屬性

在這里插入圖片描述

陰影延展

在這里插入圖片描述

內陰影

在這里插入圖片描述

多陰影

在這里插入圖片描述

 box-shadow: inset 2px 2px 10px red, 4px 4px 10px blue, 6px 6px 10px yellow;

在這里插入圖片描述

（十）、過渡

transition過渡屬性是CSS3濃妝重彩的特性，過渡可以為一個元素在不同樣式之間變化添加自動補間影片

在這里插入圖片描述

哪些屬性可以參與過渡

背景顏色和文字顏色都可以被過渡
所有變形（包括2D和3D）都能被過渡
所有數值型別的屬性，都可以參與過渡，比如width，height，left，top，border-radius

過渡的四個小屬性

在這里插入圖片描述

緩動引數

transition的第三個屬性就是緩動引數，也就是變化速度曲線

在這里插入圖片描述

（十一）、貝塞爾曲線

官網： https://cubic-bezier.com/

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1200px;
            overflow: hidden;
            margin: 40px auto;
        }
        
        .box ul {
            list-style: none;
        }
        
        .box ul li {
            position: relative;
            width: 380px;
            height: 210px;
            margin-right: 20px;
            float: left;
        }
        
        img {
            width: 380px;
            height: 210px;
        }
        
        .box ul li .info {
            position: absolute;
            width: 370px;
            height: 30px;
            color: #fff;
            line-height: 30px;
            padding-left: 10px;
            background-color: rgba(0, 0, 0, .5);
            left: 0;
            bottom: 0;
            opacity: 0;
            transition: opacity 0.5s linear;
        }
        
        .box ul li .info:hover {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="images/bj/0.jpg" alt="">
                <div class="info">北京的故宮</div>
            </li>

            <li><img src="images/bj/1.jpg" alt="">
                <div class="info">十七孔橋</div>
            </li>

            <li><img src="images/bj/2.jpg" alt="">
                <div class="info">國家大劇院</div>
            </li>

        </ul>
    </div>
</body>

</html>