用 CSS 實現平行四邊形分頁導航

在網頁底部分頁看到這樣的效果是不是看上去還不錯？下面就來看看這是如何實現的吧~

第一種方法：利用border

一個矩形拼接兩個三角形最終制造出一個平行四邊形。為什么使用border可以產生三角形呢？先來看看一張圖片：

看了圖中的三個小圖形的變化過程，你應該已經清楚了一半。其實 hack 出三角形只需要兩個條件，第一，元素本身的長寬為0；其次，將不需要的部分通過 border-color 來設置隱藏。通過類似的方法，你還可以創造出梯形，上圖中的三個圖形的代碼如下

CSS

#first {
  width:20px;
  height:20px;
  border-width:10px;
  border-style:solid;
  border-color:red green blue brown;
}
 
#second {
  width:0;
  height:0;
  border-width:10px;
  border-style:solid;
  border-color:red green blue brown;
}
 
#third {
  width:0;
  height:0;
  border-width:10px;
  border-style:solid;
  border-color:red transparent transparent transparent;
}

接下來就要考慮如何拼接出一個平行四邊形了。在border法中，它由三部分組成，分別是左三角形、矩形、右三角形。如果每次繪制平行四邊形都要創建三個元素顯然過于麻煩了，所以在這里:before和:after偽元素是個不錯的選擇。下面我們實現一下這樣的效果：

為了將三角形與矩形無縫拼接到一起，多處屬性要保持一致，所以使用類似 Less, Sass, Stylus 等 CSS 預處理器來寫這段代碼會更容易維護，下面給出 Scss 版本的代碼，其他預處理代碼類似

//三角形的寬高
$height:24px;
$width:12px;
 
//對平行四邊形三部分的顏色進行賦值
@mixin parallelogram-color($color){
  background:$color;
  &:before {border-color:transparent $color $color transparent;}
  &:after {border-color:$color transparent transparent $color;}
}
 
//單個三角形的樣式
@mixin triangle(){
  content:'';
  display:block;
  width:0;
  height:0;
  position:absolute;
  border-style:solid;
  border-width:$height / 2 $width / 2;
  top:0;
}
 
//平行四邊形的樣式
.para {
  display:inline-block;
  position:relative;
  padding:0 10px;
  height:$height;
  line-height:$height;
  margin-left:$width;
  color:#fff;
 
  &:after {
    @includetriangle();
    right:-$width;
  }
 
  &:before {
    @include triangle();
    left:-$width;
  }
 
  @include parallelogram-color(red);
}

需要注意的是，如果通過 $height、$width 設置的三角形斜率太小或太大都有可能造成渲染出鋸齒，所以使用起來要多多測試一下不同的寬高所得到的視覺效果如何。

第二種方法：利用transform

使用transform來實現平行四邊形的方法效果大概是這個樣子

原來還可以只有平行四邊形的外輪廓。（因為方法一只能創造填充效果的平行四邊形）實現起來非常簡單，主要是借助了transform: skew(...)，下面就來看看源碼吧

<style>
.city {
  display:inline-block;
  padding:5px 20px;
  border:1px solid #44a5fc;
  color:#333;
  transform:skew(-20deg);
}
</style>
 
<div class="city">上海</div>

于是我們得到了這樣的效果：

看到圖片的你一定是這樣想的：

別著急嘛，我們的確是把整個 div 進行了歪曲，導致中間的文字也是傾斜的，而這顯然不是我們所要的效果。所以我們需要加一個內層元素，并對內層元素做一次逆向的歪曲，從而得到我們想要的效果：

實現代碼如下

<style>
.city {
  display:inline-block;
  padding:5px 20px;
  border:1px solid #44a5fc;
  color:#333;
  transform:skew(-20deg);
}
 
.city div {
  transform:skew(20deg);
}
</style>

<div class="city">
  <div>上海</div>
</div>

總結

第一種方法使用 border 屬性 hack 出三角形，并通過對三個元素進行拼接最終實現了平行四邊形；而第二種方法則通過 transform: skew 來得到平行四邊形。總體來說，第二種方法相對于第一種代碼量小得多，而且也很好理解。唯一的不足是無法構造像本站的分頁中所使用的梯形。希望本文對各位有所幫助。

天總結的是CSS3的學習內容

一、CSS簡介

CSS3是CSS技術的升級版本，CSS即層疊樣式表(Cascading StyleSheet)。CSS3語言是朝著模塊化發展的，把它分解成小的模塊，并且加入更多新的模塊進來：

二、CSS3的應用

2.1.超級選擇器

CSS選擇器：使用CSS對html頁面中的元素實現一對一，一對多或者多對一的控制：

選擇器
{
    樣式
}

1.屬性選擇器

在CSS3中追加了三個選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性，val表示為屬性的屬性值。

[att*=val]:如果元素用att表示的屬性的值中包含val指定的字符，那么該元素使用這個樣式。

[att$=val]:如果元素用att表示的屬性的屬性值的結尾字符用val指定的字符，那么該元素使用這個樣式。

[att^=val]:如果元素用att表示的屬性的屬性值的開頭字符為用val指定的字符，那么該元素使用這個樣式。

注意： /如果純用數字的時候該樣式不會顯示成功，需要用\連接與數字最近的符號注意！只有’-‘的字符需要加’\’/

<head>
    <meta charset="UTF-8">
    <title>css3中的屬性選擇器</title>
    <style>
        /*1.[att*=val] 此時只有id=section1A的div會擁有該樣式*/
        [id*=section1]{
            background-color: blueviolet;
        }
        /*2.[att^=val] 此時只有id=footer的div會擁有該樣式*/
        [id^=f]{
            background-color: blue;
        }
        /*3.[att$=val] 此時只有id=sectionB的div會擁有該樣式*/
         [id$=B]{
            background-color: chartreuse;
        }
        /*注意！*/
        [id$=\-1]{
            background-color: crimson;
        }
    </style>
</head>
<body>
    <h1>CSS3中的屬性選擇器</h1>
    <div id="section1A">section1A</div>
    <div id="sectionB">sectionB</div>
    <div id="section2-1">section2-1</div>
    <div id="footer">footer</div>
</body>

2.結構性偽類選擇器
(1)類選擇器
使用類選擇器把相同的元素定義成不同的樣式，偽類選擇器是已經定義好的不可以隨便起名。

p.right{
    color:red;
}
p.left{
    colot:blue;
}

(2)偽類選擇器—-最常見的偽類選擇器：a（使用順序為：未，已，懸，停）

        a:link{
            color: #ff6600;
        }
        a:visited{
            color: blueviolet;
        }
        a:hover{
            color: aqua;
        }
        /*鼠標點擊時*/
        a:active{
            color: darkblue;
        }

(3)偽元素選擇器
針對于CSS中已經定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。

選擇器:偽元素{
    屬性:值;
}
選擇器.類名:偽元素{
    屬性:值;
}

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內容。

after：在某個元素之后插入一些內容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標題前加上編號：counter屬性對項目追加編號

            元素:before{
                content:counter(計數器);
            }
            元素{
                counter-increment:content屬性值中所指定的計數器名稱；
            }

    b.對編號中添加文字
    c.指定編號的樣式
    d.指定編號的種類：list-style-type
    e.編號嵌套，重置編號
        要對哪一個元素進行重置，那么就在該元素的父元素上進行設置reset。
    f.中編號中嵌入大編號

        h2:before{
            content:counter(大編號計數器)'-'conter(中編號計數器);

    g.在字符串兩邊嵌套文字符號:open-quoter&close-quoter

<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四個偽類選擇器</h1>
    <p>
        CSS中主要有四個偽類選擇器<br />
        first-line偽元素選擇器：向某個元素中的第一行文字使用樣式
    </p>
    <p>
        first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)結構性偽類選擇器

root選擇器：將樣式綁定到頁面的根元素中。
not選擇器：只對某個結構元素使用樣式，但該元素下面的子結構元素不使用該樣式。
empty選擇器：指定當元素中內容為空白時顯示的樣式。

<head>
    <style>
    /*empty選擇器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

target選擇器：在用戶點擊了超鏈接并轉到target元素后，對頁面中某個target元素指定樣式。

<head>
    <style>
        /*target選擇器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target選擇器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A標題</h2>
        <p>內容</p>
    </div>
    <div id="B">
        <h2>B標題</h2>
        <p>內容</p>
    </div>
</body>

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數下來的第N個子元素，nth-child(odd)為第奇數個子元素，nth-child(even)為第偶數個子元素。

nth-last-child(n)：匹配倒數數下來第n個子元素。

nth-of-type：正數，當指定元素為標題加內容的時候，如果使用上面的方法會導致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進行指定。

nth-last-type：倒數，同nth-first-type。

循環使用樣式：nth-child(An+B)–A 表示每次循環中共包括幾種樣式，B表示指定的樣式在循環中所處的位置。

only-child：只對一個元素起作用。

<head>
    <meta charset="UTF-8">
    <title>結構性偽類選擇器</title>
    <style>
        /* 選擇器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循環*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的問題*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一個就沒有啦</li>
    </ul>
    <div id="A">
        <h2>A標題</h2><p>內容</p>
        <h2>B標題</h2><p>內容</p>
    </div>
</body>

3.UI元素狀態偽類選擇器
指定的樣式只有在元素處于某種狀態下才起作用，在默認狀態下不起作用！

選擇器:偽元素{
    屬性:值;
}
選擇器.類名:偽元素{
    屬性:值;
}

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內容。

after：在某個元素之后插入一些內容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標題前加上編號：counter屬性對項目追加編號

            元素:before{
                content:counter(計數器);
            }
            元素{
                counter-increment:content屬性值中所指定的計數器名稱；
            }

    b.對編號中添加文字
    c.指定編號的樣式
    d.指定編號的種類：list-style-type
    e.編號嵌套，重置編號
        要對哪一個元素進行重置，那么就在該元素的父元素上進行設置reset。
    f.中編號中嵌入大編號

        h2:before{
            content:counter(大編號計數器)'-'conter(中編號計數器);

       g.在字符串兩邊嵌套文字符號:open-quoter&close-quoter

<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四個偽類選擇器</h1>
    <p>
        CSS中主要有四個偽類選擇器<br />
        first-line偽元素選擇器：向某個元素中的第一行文字使用樣式
    </p>
    <p>
        first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)結構性偽類選擇器

root選擇器：將樣式綁定到頁面的根元素中。
not選擇器：只對某個結構元素使用樣式，但該元素下面的子結構元素不使用該樣式。
empty選擇器：指定當元素中內容為空白時顯示的樣式。

<head>
    <style>
    /*empty選擇器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

target選擇器：在用戶點擊了超鏈接并轉到target元素后，對頁面中某個target元素指定樣式。

<head>
    <style>
        /*target選擇器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target選擇器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A標題</h2>
        <p>內容</p>
    </div>
    <div id="B">
        <h2>B標題</h2>
        <p>內容</p>
    </div>
</body>

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數下來的第N個子元素，nth-child(odd)為第奇數個子元素，nth-child(even)為第偶數個子元素。

nth-last-child(n)：匹配倒數數下來第n個子元素。

nth-of-type：正數，當指定元素為標題加內容的時候，如果使用上面的方法會導致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進行指定。

nth-last-type：倒數，同nth-first-type。

循環使用樣式：nth-child(An+B)–A 表示每次循環中共包括幾種樣式，B表示指定的樣式在循環中所處的位置。

only-child：只對一個元素起作用。

<head>
    <meta charset="UTF-8">
    <title>結構性偽類選擇器</title>
    <style>
        /* 選擇器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循環*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的問題*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>選擇器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一個就沒有啦</li>
    </ul>
    <div id="A">
        <h2>A標題</h2><p>內容</p>
        <h2>B標題</h2><p>內容</p>
    </div>
</body>

3.UI元素狀態偽類選擇器
指定的樣式只有在元素處于某種狀態下才起作用，在默認狀態下不起作用！

4.兄弟元素選擇器
用來指定位于同一父元素之中的某個元素之后的所有其他某個種類的兄弟元素所使用的樣式。一定要是之后的兄弟元素！

<子元素>~<子元素之后的同級兄弟元素>
    {
        樣式
    }

2.2.文字陰影與自動換行

1.text-shadow

p{
    text-shadow：length(陰影離開文字的橫方向距離) length(陰影離開文字的縱方向距離) length(陰影模糊半徑) color(陰影顏色)
}

位移距離：前兩個參數代表的陰影離開文字的橫(縱)方向距離，不可省略。

第三個參數代表模糊半徑，代表陰影向外模糊時候的范圍，數值越大越模糊。

當沒有指定顏色值時，會使用默認文字的顏色。

指定多個陰影，并且可以針對每個陰影用逗號分隔。

2.word-break：瀏覽器文本自動換行。

3.word-wrap：長單詞與URL地址自動換行。

4.服務器端字體和@font-face屬性

定義斜體或粗體：在定義字體的時候，可以把字體定義成斜體或者粗體，在使用服務器服務器端字體的時候，需要根據斜體還是粗體使用不同的漢字。

顯示客戶端字體：首先將font-family設置為本地的字體名，然后將src屬性設置為local(‘字體’)。

font-variant：設置文本是否大小寫。

font-weight：設置文本的粗細。

font-stretch：設置文本是否橫向的拉伸變形。

2.3.盒模型

1.各種盒模型

inline-block類型

使用inline-block類型來執行分列顯示

<head>
    <style>
    div.div1{
            background-color: #ff6600;
            width: 300px;
            height: 150px;
            float: left;
        }
        div.div2{
            background-color: #21fffc;
            width: 200px;
            height: 100px;
            float: left;
        }
        div.div3{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
            clear: both;
        }
        /*inline-block*/
        div.div4{
            background-color: #ff6600;
            display: inline-block;
            width: 300px;
        }
        div.div5{
            background-color: #21fffc;
            vertical-align: top;
            display: inline-block;
            width: 200px;
        }
        div.div6{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
        }
      </style>
</head>
<body>
    <h1>使用inline-block類型來執行分列顯示-1.傳統方式</h1>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <hr color="darkred">
    <h1>使用inline-block類型來執行分列顯示-1.inline-block方式</h1>
    <div class="div4">
        div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
    </div><div class="div5">
        div2div2div2div2div2div2div2
        div2div2div2div2div2div2div2div2
    </div>
    <div class="div6">
        div3
    </div>  
</body>

使用inline-block類型來顯示水平菜單

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block類型來顯示水平菜單-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

使用inline-block類型來顯示水平菜單

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block類型來顯示水平菜單-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

inline-table類型

<head>
    <style>
        table{
           display: inline-table;
           vertical-align: bottom;
           border: 2px solid blueviolet;
           width: 400px;
           height: 200px;
           color: darkviolet;
       }
        td{
            border: 2px solid violet;
        }
    </style>
</head>
<body>
    <h1>使用inline-table類型-一個表格前后都有文字將其環繞</h1>
    巴拉巴拉
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    巴拉巴拉
</body>

list-item類型

可以將多個元素作為列表顯示，同時在元素的開頭加上列表的標記。

run-in類型和compact類型

none類型

當元素被指定none后，該元素不會顯示

2.顯示不下的內容

overflow屬性：指定對盒子中容納不下的內容的顯示辦法

overflow-x屬性與overflow-y屬性

textoverflow：在盒子的末尾顯示代表省略符號的‘…’，但是該屬性只在內容在水平位置上超出時顯示。

3.盒子陰影

box-shadow:讓盒在顯示的時候產生陰影的效果

對盒內子元素設置陰影

對一個文字或第一行設置陰影：通過first-line或者first-letter

對表格和對單元格使用陰影

4.box-sizing寬高計算

指定針對元素的寬度和高度的計算方法

    (content)border-box:屬性值表示元素的寬高度(不)包括內補白區域及邊框的寬度高度

<head>
    <style>
        div.a,div.b{
            width: 300px;
            padding: 30px;
            margin: 20px auto;
            border: 30px solid darkviolet;
            background-color: violet;
        }
        div.a{
            box-sizing: border-box;
        }
        div.b{
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <h2>box-sizing：content&border-box</h2>
    <div class="ab">
        <div class="a">
            box-sizing：border-box代表寬度和高度包含內補白寬度高度，即雖然有padding和border，最終仍然為300px
        </div>
        <div class="b">
            box-sizing：content-box:代表不包含寬高度內補白區域，即最后為300px+30px+30px
        </div>
    </div>
</body>

2.4.邊框和背景樣式

1.新增的背景屬性

background-clip:指定背景的顯示范圍

border-box：從邊框開始

padding-box：從內邊框開始

content-box：從內容開始

background-orgin:指定繪制背景圖像的起點

可以指定繪制時的起始位置，默認為padding，可以為border或者content左上角開始繪制。

background-size:指定背景中圖像的尺寸

auto

length

percentage：以父元素的百分比設置背景圖像的寬高度。

cover：全覆蓋。

contain ：與cover相反，主要將背景圖片縮小，來適合布滿整個容器。

2.顯示多個背景屬性：第一個圖像在最上面

3.圓角邊框：border-radius

指定兩個半徑：左上右下+左下右上

當不顯示邊框的時候，瀏覽器會把四個角繪制成圓角

修改邊框種類。

繪制四個不同半徑的邊框

4.圖像邊框：border-image

可以讓元素的長度或寬度處于隨時變化時，變化狀態的邊框統一使用一個圖像文件來進行繪制。

2.5.CSS3變形功能

1.利用transform實現文字或圖像的旋轉，縮放，傾斜移動這四種類型的變形處理。

旋轉：totate(角度)

縮放：scale(值):0.5即為縮放到50%

傾斜:skew(值),值為角度

移動：translate(值)

對一個元素使用多個方法

transform：方法1 方法2 方法 3 方法4

改變元素基點

transform-origin:

2.6.CSS3的動功能

1.transition功能：支持從一個屬性值平滑到另外一個屬性值

允許CSS屬性值在一定的時間內平滑的過度，這種效果可以在單擊，獲得焦點，被點擊或對元素任何改變中觸發，并圓滑的以動畫效果改變CSS屬性值。

(1)執行變換的屬性：transition-property：過渡即將開始

none：沒有屬性會獲得過渡效果

all:所以屬性會獲得過渡效果

property：定義應用過渡效果的CSS屬性名稱列表，以逗號分隔

(2)變換延續時間：transition-duration：規定完成過渡需要花費的時間，默認值零沒有效果。

(3)在延續時間段，變換速率的變化：transition-timing-function。

(4)變換延遲時間：transition-delay：指定一個動畫開始執行的時間，也就是當改變元素屬性值后多長時間開始執行過渡效果。

<head>
    <meta charset="UTF-8">
    <title>CSS3中的動畫效果</title>
    <style>
        div.transition1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            -webkit-transition:all 1s linear 1s;
        }
    </style>
</head>
<body>
    <h2>transition</h2>
    <div class="transition1"></div>
</body>

2.Animations功能：支持通過關鍵幀的指定來在頁面上產生更復雜的動畫現象。

name：指定合集名稱
duration：整個動畫執行完成所需時間
timing-function：實現動畫方法
iteration-count：重復播放次數

<head>
    <style>
        div.animation{
            width: 20px;
            height: 20px;
            background-color: #ef23ff;
        }
        /*關鍵幀的封裝*/
        @-webkit-keyframes myan{
            0%{
                background-color: violet;
                width: 50px;
            }
            10%{
                background-color: palevioletred;
                width: 100px;
            }
            30%{
                background-color: mediumvioletred;
                width: 200px;
            }
            50%{
                background-color: blueviolet;
                width: 40px;
            }
            70%{
                background-color: darkviolet;
                width: 400px;
            }
            90%{
                background-color: #7300a4;
                width: 600px;
            }
            100%{
                background-color: #4a0068;
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <h2>animation</h2>
    <div class="animation"></div>
</body>

2.7.CSS3的分頁

1.點擊及鼠標懸停分頁樣式

2.鼠標懸停過渡效果：transition: background-color .9s;

3.圓角樣式：border-radius

4.邊框：border:2px solid darkviolet;

2.8.布局相關樣式

1.多欄布局

column-count屬性：將一個元素中的內容分成多欄進行顯示，要將元素的寬度設置成多個欄目的總寬度

column-width屬性：指定欄目的寬度來生成分欄

column-gap屬性：指定欄目之間的距離

column-rule:欄目之間添加分隔線

2.盒布局：多欄布局的欄目寬度必須相等，指定欄目的寬度的時候也只能統一指定，但是欄目的寬度不可能全部都一樣，所以多欄布局比較適合在文字內容頁面顯示，比如新聞。并不適合整個網頁編排時使用。而盒布局就相對比較隨意一些，可以定義成不同的頁面。

3.彈性盒子布局

(1)box-flex：使得盒子布局變成彈性布局：可以自適應窗口

(2)box-ordinal-group：改變元素的顯示順序

(3)box-orient：改變元素排列方向

horizontal:在水平行中從左向右排列子元素

vertical：從上向下垂直排列子元素

<style>
    div.all{
        display: -webkit-box;
        /*-webkit-box-orient: vertical;窗口垂直現實與水平顯示*/
        }
        .left{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group:3;
        }
        .right{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group: 2;
        }
        .center{
            -webkit-box-flex:1;
            background-color: #962fff;
            -webkit-box-ordinal-group: 1;
        }
    </style>

(4)元素的高度寬度自適應：就是元素的高度和寬度可以根據排列的方向改變而改變。
(5)使用彈性布局來消除空白：方法就是給子div中加入一個box-flex屬性。

<style>
    .center1{
            display: -webkit-box;/*盒模型顯示*/
            border: 5px solid darkviolet;
            -webkit-box-orient: horizontal;/*水平顯示*/
            width: 600px;
            height: 400px;
        }
        .d1{
            background-color: #ff99e1;
            -webkit-box-flex: 2;
        }
        .d2{
            background-color: #962fff;
            -webkit-box-flex: 3;
        }
        .d3{
            background-color: #ef23ff;
            -webkit-box-flex: 4;
        }
        .d1,.d2,.d3{
            -webkit-box-sizing: border-box;
        }
    </style>

(6)對多個元素使用box-flex屬性，讓瀏覽器或者容器中的元素的總寬度或者總高度都等于瀏覽器或者容器高度。

(7)box-pack屬性和box-align屬性：指定水平方向與垂直方向的對齊方式(文字，圖像，以及子元素的水平方向或是垂直方向上的對齊方式)

2.9.不同瀏覽器加載不同的CSS樣式

Media Queries模塊是CSS3中的一個和各種媒體相關的重要模塊

原文鏈接：https://blog.csdn.net/qq_27348951/article/details/53378364

紹：

這是一款來自國外的分頁樣式，主要以灰色為主，紅色為輔。經測試，兼容所有瀏覽器，但 IE6 png 背景圖片未處理，請自行處理。如果喜歡這款分頁就拿去使用吧。

演示地址：

https://www.361zy.com/demo/520/

下載地址：

https://cloud.06dn.com/s/RWZC3

解壓碼：

WpUiD9SO

在線咨詢

上一篇：CSS 01：基礎
下一篇：大超教你建網站：域名

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商