Web開發學習筆記（34）-CSS3（8）新增特效7

1）CSS3顏色的使用

介紹顏色定義方式，包含 RGB 模式、RGBA 模式、HSL 模式和 HSLA 模式。

知識點

RGB
RGBA
HSL
HSLA

RGB 指的是三原色，也就是說，R 是 Red 的簡寫，G 是 Green 的簡寫，B 是 Blue 的簡寫，其三者的顏色取值均為 0~255，當我們給這三種顏色的設定不同的值時，三者顏色混合在一起就會調配成其他顏色了。

RGBA 色彩模式是 RGB 色彩模式的擴展，在 Red（紅）、Green（綠）、Blue（藍）三原色通道的基礎上，增加了 alpha（明度）參數，這樣設置讓顏色的設置變得更加合理和便捷。

其語法格式為：

rgba(r,g,b,<opacity>)

其中，rgb 的顏色取值范圍為 0～255，opacity 的取值范圍為 0~1。若是輸入值超過取值范圍，瀏覽器會將數值調整到最近的可取值。

<!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>
        li{
            width:100px;
            list-style:none;
        }
        ul{
            float:left;
            margin-left: 40px;
        }
        li.opacity1{
            opacity: 1;
            background:red;
        }
        li.opacity2{
            opacity: 0.8;
            background:red;
        }
        li.opacity3{
            opacity: 0.6;
            background:red;
        }
        li.opacity4{
            opacity: 0.4;
            background:red;
        }
        li.opacity5{
            opacity: 0.2;
            background:red;
        }
        li.opacity6{
            opacity: 0;
            background:red;
        }
        li.rgba1{
            background: rgba(255, 0, 0, 1);
        }
        li.rgba2{
            background: rgba(255, 0, 0, 0.8);
        }
        li.rgba3{
            background: rgba(255, 0, 0, 0.6);
        }
        li.rgba4{
            background: rgba(255, 0, 0, 0.4);
        }
        li.rgba5{
            background: rgba(255, 0, 0, 0.2);
        }
        li.rgba6{
            background: rgba(255, 0, 0, 0);
        }
    </style>
</head>
<body>
    <ul>
        <li>opacity 效果</li>
        <li class="opacity1">100%</li>
        <li class="opacity2">80%</li>
        <li class="opacity3">60%</li>
        <li class="opacity4">40%</li>
        <li class="opacity5">20%</li>
        <li class="opacity6">0</li>
    </ul>
    <ul>
        <li>rgba 效果</li>
        <li class="rgba1">1</li>
        <li class="rgba2">0.8</li>
        <li class="rgba3">0.6</li>
        <li class="rgba4">0.4</li>
        <li class="rgba5">0.2</li>
        <li class="rgba6">0</li>
    </ul>
</body>
</html>

（2）HSL 標準幾乎包含了人類所能感知的所有顏色，顯示器上能呈現的顏色也都在這個范圍內。

其語法格式為：

hsl(hue,staturation,lightness)

H(hue) 色相

CSS3 的色相使用一個圓環來表示，取值范圍 0~360。其中 0 和 360 表示紅色，120 表示綠色，240 表示藍色，其他的顏色依次類推。CSS3 色相環如下圖所示：

<!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>
        div{
            width:100px;
            height:100px;
            float:left;
            font-size:12px;
        }
        #div1{
            background-color: hsl(60,0%,50%);
        }
        #div2{
            background-color: hsl(60,25%,50%);
        }
        #div3{
            background-color: hsl(60,50%,50%);
        }
        #div4{
            background-color: hsl(60,75%,50%);
        }
        #div5{
            background-color: hsl(60,100%,50%);
        }
    </style>
</head>
<body>
    <div id="div1">hsl(60,0%,50%)</div>
    <div id="div2">hsl(60,25%,50%)</div>
    <div id="div3">hsl(60,50%,50%)</div>
    <div id="div4">hsl(60,75%,50%)</div>
    <div id="div5">hsl(60,100%,50%)</div>
</body>
</html>

飽和度對比

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        float: left;
        font-size: 12px;
        color: darkgray;
      }
      #div1 {
        background-color: hsl(60, 100%, 0%);
      }
      #div2 {
        background-color: hsl(60, 100%, 25%);
      }
      #div3 {
        background-color: hsl(60, 100%, 50%);
      }
      #div4 {
        background-color: hsl(60, 100%, 75%);
      }
      #div5 {
        background-color: hsl(60, 100%, 100%);
      }
    </style>
  </head>
  <body>
    <div id="div1">hsl(60,100%,0%)</div>
    <div id="div2">hsl(60,100%,25%)</div>
    <div id="div3">hsl(60,100%,50%)</div>
    <div id="div4">hsl(60,100%,75%)</div>
    <div id="div5">hsl(60,100%,100%)</div>
  </body>
</html>

亮度對比

S(staturation) 飽和度

飽和度表示顏色的鮮艷程度，取值范圍為 0%~100%，數值越高飽和度越高，顏色就越鮮艷。完全不飽和（0%）的顏色是沒有色相的。

L(lightness)亮度

亮度用來控制色彩的明暗變化，取值范圍為 0%~100%。數值越小色彩越暗越接近于黑色，數值越大色彩越亮越接近于白色。

（3）HSLA 是由色相（hue）、飽和度（saturation）、亮度（lightness）、明度（alpha）組成。

其語法格式為：

hsla(hue, saturation, lightness, alpha)

其中，參數 alpha 的取值在 0.0～1.0 這個區間。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 50px;
        text-align: center;
      }
      #item1 {
        background-color: hsla(2, 40%, 60%, 1);
      }
      #item2 {
        background-color: hsla(2, 40%, 60%, 0.7);
      }
      #item3 {
        background-color: hsla(2, 40%, 60%, 0.4);
      }
      #item4 {
        background-color: hsla(2, 40%, 60%, 0.2);
      }
    </style>
  </head>
  <body>
    <div id="item1">hsla(2, 40%, 60%, 1)</div>
    <div id="item2">hsla(2, 40%, 60%, 0.7)</div>
    <div id="item3">hsla(2, 40%, 60%, 0.4)</div>
    <div id="item4">hsla(2, 40%, 60%, 0.2)</div>
  </body>
</html>

（4）線性漸變函數和重復性線性漸變函數。

知識點

linear-gradient 函數
repeating-linear-gradient 函數

線性漸變是向下、向上、向左、向右、對角方向的顏色漸變。

其語法格式為：

background-image: linear-gradient(side-or-corner|angle, linear-color-stop);

參數說明如下：

side-or-corner 是描述漸變線的起始位置，它包含兩個關鍵詞：第一個指出水平位置 left or right，第二個指出垂直位置 top or bottom。
angle 是用角度值來指定漸變的方向。
linear-color-stop 是設置漸變的顏色值。

<!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>
        #linear{
            display: flex;
        }
        .gradient1{
            width:100px;
            height:100px;
            background-image:linear-gradient(#ff577f, #c6c9ff);
        }
        .gradient2{
            margin-left:10px;
            width:100px;
            height:100px;
            background-image: linear-gradient(to right, #ff9d72, #c6c9ff); 
        }
        .gradient3{
            margin-left: 10px;
            width:100px;
            height:100px;
            background-image:linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
        }
        .gradient4{
            margin-left: 10px;
            width:100px;
            height:100px;
            background-image: linear-gradient(50deg,  #bc6ff1, #ffd5cd);
        }
    </style>
</head>
<body>
    <div id="linear">
        <div class="gradient1"></div>
        <div class="gradient2"></div>
        <div class="gradient3"></div>
        <div class="gradient4"></div>
    </div>
</body>
</html>

（5）重復性線性漸變是用重復的線性漸變組成的 <image>，它與線性漸變的區別在于，它會在所有方向上重復漸變來覆蓋整個元素。

其語法格式為：

background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);

參數說明如下：

side-or-corner 是描述漸變線的起始位置，它包含 to 和兩個關鍵詞：第一個指出水平位置 left or right，第二個指出垂直位置 top or bottom。
angle 是用角度值來指定漸變的方向。
color-stop 是由一個 <color> 組成，并且跟隨一個可選的終點位置。

<!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>
        div{
            width:200px;
            height:200px;
            display:inline-block;
            margin-left:20px;
            margin-top:20px;
        }
        .item1{
            background-image:repeating-linear-gradient(
                15deg, /*上偏右的角度，北偏東*/
                #8843f8 0%,
                #ef2f88 5%,
                #f47340 10%,
                #f9d371 15%
            );
        }
        .item2{
            background-image:repeating-linear-gradient(
                to left top,
                #8843f8 0%,
                #ef2f88 5%,
                #f47340 10%,
                #f9d371 15%
            );
        }
    </style>
</head>
<body>
    <div class="item1"></div>
    <div class="item2"></div>
</body>
</html>

linear-gradient 函數沒有內在尺寸，所有的顏色值會根據元素的大小與之匹配來漸變渲染整個元素。
repeating-linear-gradient 函數有內在尺寸，會從第一個顏色值開始重復性的漸變渲染元素，直到元素被填滿。

（6）設置徑向漸變的背景顏色。

知識點

radial-gradient 函數
repeating-radial-gradient 函數

徑向漸變是由元素中間定義的漸變。

其語法格式為：

background-image: radial-gradient(shape, color-stop);

參數說明如下：

shape 設置漸變的形狀，其取值有 circle（圓形）和 ellipse（橢圓）。
color-stop 設置某個確定位置的顏色值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #radial {
        display: flex;
      }
      /*均勻分布徑向漸變*/
      .gradient1 {
        width: 100px;
        height: 100px;
        background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);
      }
      /*不均勻漸變*/
      .gradient2 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);
      }
      /*橢圓形漸變*/
      .gradient3 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
      }
      /*圓形漸變*/
      .gradient4 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
      }
    </style>
  </head>
  <body>
    <div id="radial">
      <div class="gradient1"></div>
      <div class="gradient2"></div>
      <div class="gradient3"></div>
      <div class="gradient4"></div>
    </div>
  </body>
</html>

中心向四周

（7）重復性徑向漸變是用重復性的徑向漸變組成的圖像。它與徑向漸變的區別在于，它會從原點開始重復徑向漸變來覆蓋整個元素。

其語法格式為：

background: repeating-radial-gradient(extent-keyword, color-stop);

參數說明如下：

extent-keyword 是描述邊緣輪廓的具體位置，關鍵字常量如下所示：
color-stop 是某個確定位置的固定顏色值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin-left: 20px;
        margin-top: 20px;
      }
      .gradient1 {
        background: repeating-radial-gradient(
          closest-corner,
          #8843f8 0%,
          #ef2f88 5%,
          #f47340 10%,
          #f9d371 15%
        );
      }
      .gradient2 {
        background: repeating-radial-gradient(
          farthest-side,
          #8843f8,
          #ef2f88,
          #f47340,
          #f9d371
        );
      }
    </style>
  </head>
  <body>
    <div class="gradient1"></div>
    <div class="gradient2"></div>
  </body>
</html>

兩種徑向漸變函數，兩者之間的區別總結如下：

radial-gradient 函數沒有固定的尺寸，其大小根據適應于元素的大小。
repeating-radial-gradient 函數有固定的尺寸，通過重復漸變來填充元素。

文：https://blog.csdn.net/TriDiamond6/article/details/105222289

前言

CSS是一個很獨特的語言?？雌饋矸浅：唵危悄撤N特殊效果看似簡單，實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，重新燃起對前端排版和特效的熱愛和熱情！

1、固定底部內容

這種是一個非常常見的布局方式，但是對于新手來說是比較常見的難題。

這種布局方式在后臺管理系統中比較常見，當我們內容不足瀏覽器窗口高度時，底部內容需要固定在底部。當內容超出了瀏覽器窗口高度，就會隨著內容往后推。

在有CSS3之前，實現這個效果是頗有難度的。瀏覽器窗口高度是會根據不同用戶打開瀏覽器的情況，屏幕大小的差異和瀏覽器的縮放比例而變。我們需要借助JavaScript來實時獲取瀏覽器高度進行運算才能實現。雖然說標題是說“固定”底部，但是我們想要的效果不是position: fixed。使用固定定位，在內容高于窗口高度時，就會擋住我們的內容。

隨著CSS3的來臨，最完美的實現方式是使用Flexbox。實現的關鍵就是使用不太被關注的flex-grow屬性，可以在我們的內容標簽元素（比如div）中使用。在我們下面的例子里使用了main標簽。

我來講解一下實現原理吧。

flew-grow是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間。如果我們使用flex-grow: 0，那這個flex元素就完全不會擴展了。所以我們需要把頭部和底部之間的內容標簽元素設置為flex-grow: 1或者flex-grow: auto，這樣內容部分就會自動填充滿頭部和底部之外的所有空間。

為了避免底部內容受內容部分擴充空間的影響，我們給footer底部元素flex-shrink: 0屬性。flex-shrink的作用與flex-grow是恰恰相反，用來控制flex元素收縮的空間，這里我們給了flex-shrink: 0就是為了底部footer的大小不受影響。

我們直接上HTML和CSS代碼看看是怎么實現的。

HTML

<div id="document">  
  <nav>    
  <h1>頭部內容</h1>  
</nav>  
<main>    
  <p>可以添加更多內容看看底部的變化哦！</p>  
</main>  
<footer>    
  <h1>底部內容</h1>  
</footer>
</div>

CSS

#document {    
	height: 100vh;    
	display: flex;    
	flex-direction: column;    
	background: #202020;    
	font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}
nav, footer {    
  background: #494949;    
  display: flex;    
  justify-content: center;
}
main {    
  color: #bdbdbd;    
  flex: auto;
}
footer {    
  flex-shrink: 0;
}
* {    
  margin: 0;
}
h1,p {    
  padding: 15px;
}
nav > h1 {    
  color: #82FCFD;    
  text-shadow: 1px 1px 4px #00000080;
}
footer > h1 {    
  color: #82FCFD;    
  text-shadow: 1px 1px 4px #00000080;
}

知識點總結：

flex-grow — 是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間
flex-shrink — 作用與flex-grow是恰恰相反，用來控制flex元素收縮的空間

2. 懸停放大圖片特效

懸停放大圖片是一個特別吸引眼球的特效，比較常用于可點擊的圖片。當用戶懸停鼠標在圖片上，圖片會稍微的放大。

其實實現這個特效是非常簡單的。首先我們需要一個div包裹這img標簽，這個包裹層是用來遮擋住圖片，當圖片放大時不會出現圖片超出我們規定的寬高以外。

首先我們來講講div包裹的屬性，我們需要給它一個固定的width寬和height高。然后我們必須給予這個元素overflow: hidden屬性。讓圖片放大的時候不會超出這個div元素的寬高。有了這個包裹層，我們就可以編寫img的各種效果了。

我的例子里面用了transform: scale(1,1)作為懸停時的圖片特效，這個transform是用于改變任何元素的屬性的，然后scale是用于放大（整數就會放大）或者縮小（負數就會縮?。┰氐?。

上代碼讓大家看看：

html body中放入

<div class="img-wrapper">  
  <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>

CSS

.img-wrapper {  
  width: 400px;  
  height: 400px;  
  overflow: hidden;  
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.img-wrapper img {  
  height: 400px;  
  -webkit-transition: 0.3s linear;  
  transition: 0.3s linear;
}
.img-wrapper img:hover {  
  transform: scale(1.1);
}
.img-wrapper {  
  display: inline-block;  
  box-sizing: border-box;  
  border: 3px solid #000;
}

如果你們想讓圖片更加炫酷可以加上圖片過濾屬性filter，讓圖片變灰或者變深褐色，然后懸停時候出現更加炫酷的顏色變幻?；一膶傩允莊ilter: grayscale(100%);，然后深褐色化的屬性是filter: sepia(100%)。其實圖片還有很多過濾屬性的，大家有興趣也可以去嘗試一下哦！

加入特殊效果的代碼如下：

HTML

<!-- 灰度過濾 -->
<div class="img-wrapper">  
  <img    class="grayscale-img"    src="https://img-blog.csdnimg.cn/2020032211021728.png"  />
</div>
<!-- 深褐色過濾 -->
<div class="img-wrapper">  
  <img    class="sepia-img"    src="https://img-blog.csdnimg.cn/2020032122230564.png"  />
</div>

CSS

/* ============== * 灰度過濾 * ==============*/
.grayscale-img {  
  -webkit-filter: grayscale(100%);  
  filter: grayscale(100%);
}
.grayscale-img:hover {  
  -webkit-filter: grayscale(0);  
  filter: grayscale(0);
}
/* ============== * 深褐色過濾* ==============*/
.sepia-img {  
  -webkit-filter: sepia(100%);  
  filter: sepia(100%);
}
.sepia-img:hover {  
  -webkit-filter: sepia(0);  
  filter: sepia(0);
}

3. 瞬間黑暗模式

最近微信也逃脫不了黑暗時代的到來，網頁也很多都做了黑暗模式的兼容和主題。如果我們在做的一個網站想瞬間實現黑暗模式可以怎么實現呢？

其實有一個很快的方式，我們可以使用invert和hue-rotate兩個CSS3過濾器來實現。

filter: invert() — 是從0到1的刻度，1是從白變黑。
filter: hue-rotate() — 用于改變你元素的顏色，同時或多或少保持原本相同的色系。這個屬性的值可以從0deg到360deg。

在我們頁面的body標簽上添加這兩個屬性，我們就可以快速嘗試把我們的網站變成"黑暗模式"。這里需要注意的是，如果body和html上沒有設置background背景顏色，這個過濾就會不起效了哦。

CSS的代碼如下：

html {  
  background: #fff;
}
body {  
  background: #fff;  filter: invert(1) hue-rotate(270deg);
}

實現效果

這里我們會發現圖片的顏色會受影響，并不是很美觀，使用css過濾器是無法完美切換黑暗模式的。不過使用JavaScript輔助就可以完美的切換黑暗模式。

最近出了一個JavaScript輔助插件叫Darkmode.js。

Darkmode.js

其實Darkmode.js運用的也是css里面的一個特性叫mix-blend-mode — “CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合“。加上Javascript的輔助判斷哪些頁面上的元素需要黑化的，哪些是不需要黑化的。就會想我們之前那種做法，導致其他不需要黑化的元素，比如圖片，受到影響導致顏色出現問題。

使用Darkmode.js非常簡單，只要在腳本里面添加以下代碼就可以馬上加入一個插件，

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js">
  </script>
<script>  
  // 這些是這個插件的可配置項：  
  var options = {    
    bottom: "32px", // 定位底部距離 - 默認: '32px'    
    right: "32px", // 定位右邊距離 - 默認: '32px'    
    left: "unset", // 定位左邊距離 - 默認: 'unset'    
    time: "0.5s", // 默認動畫時間: '0.3s'    
    mixColor: "#fff", // 需要改變的顏色 - 默認: '#fff'    
    backgroundColor: "#fff", // 背景顏色 - 默認: '#fff'    
    buttonColorDark: "#262728", // 黑暗模式下按鈕顏色 - 默認: '#100f2c'    
    buttonColorLight: "#fff", // 日間模式下按鈕顏色 - 默認: '#fff'    
    saveInCookies: true, // 是否在cookie保存當前模式 - 默認: true,    
    label: "", // 切換模式按鈕圖標 - 默認: ''    
    autoMatchOsTheme: true // 是否自動根據系統適應模式 - 默認: true  
  };  
let darkmode = new Darkmode(options);  
darkmode.showWidget();
</script>

如果你不希望用這個插件的默認按鈕，你可以在你的JavaScript代碼中自主控制。我們可以通過.toggle()方法來切換模式，同時可以使用.isActivated()來檢測是否已經進入黑暗模式。

const darkmode =  new Darkmode();darkmode.toggle();
console.log(darkmode.isActivated()) 
// 如果已經進入黑暗模式會返回 true

知識總結

filter: invert() — 可以把頁面從白變黑，也可以從黑變白。
filter: hue-rotate() — 用于改變你元素的顏色，同時或多或少保持原本相同的色系。
Darkmode.js — 瞬間實現黑暗模式。

4. 自定義列表符號

ul，li的無序列表有默認的符號·，但是在很多情況下我們希望可以給這個符號加入自己的樣式和顏色，甚至是換成自定義的符號。默認的符號我們是無法做任何的樣式處理，而且默認的符號在CSS屬性里面只有幾個選擇可以使用，很多情況下都是無法滿足我們的設計。

其實自定義無序列表符號不難，我們只需要使用偽元素::before加content屬性就可以實現。

在我這個例子里面我做了兩個任務列表，一個是待處理任務，一個是已完成任務，各自給了不一樣的列表符號和顏色。

實現原理

一、首先我們禁用了ul的默認符號樣式list-style: none

二、在li的:before偽元素上給予content內容值，待處理任務使用，已完成任務li.completed:before使用?

三、為了展示效果更加好看我分別給了li和li .completed兩個不同的顏色

上代碼看看是怎么實現的吧：

HTML

<div>  
  <h2>待處理</h2>  
	<ul>    
		<li>待辦任務1</li>    
		<li>待辦任務2</li>    
		<li>待辦任務3</li>    
		<li>待辦任務4</li>    
		<li>待辦任務5</li>  
	</ul>
</div>
<div>  
  <h2>已完成</h2>  
	<ul>    
  	<li class="completed">完成任務1</li>    
		<li class="completed">完成任務2</li>    
		<li class="completed">完成任務3</li>  
	</ul>
</div>

CSS

ul {  
  list-style: none;  color: #fff;  
  font-size: 20px;  
  border: 3px solid #000;  
  padding: 1rem 2rem;  
  min-height: 200px;  
  margin: 15px 2rem 0 0;  
  background: #323232;  
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
  border-radius: 8px;
}
li {  
  padding: 0.3rem 0;
}
li::before {  
  content: " ";  
  color: aqua;
}
li.completed::before {  
  content: "? ";  
  text-decoration: none;  
  color: greenyellow;
}
li.completed {  
  text-decoration: line-through;  
  color: #bdbdbd;
}

::before和::after偽元素加content屬性可以用來做很多特殊的效果，也是當代前端排版比較常用的“魔法”。說到偽元素的使用，我再給大家說一個比較常用的使用場景。

在管理后臺或者是文章展示中，我們經常可以見到的“面包屑導航”也是用偽元素來插入每個目錄中間的符號的。

實現邏輯

一、這個導航含有3個a標簽，首先給每個a標簽加入一個偽元素::after，然后在content屬性插入/符號。

二、然后使用a:first-child，這個偽類會選擇到第一個a標簽，然后使用content屬性加入?符號。

三、因為我們第一步在每個a標簽的后面插入了/符號, 所以我們需要在最后一個a標簽清除掉。這里我們使用:last-child選擇到最后一個a標簽，然后用content: " "屬性把偽元素的內容清楚掉。

HTML

<div class="breadcrumb">  
  <a>三鉆</a>  
	<a>前端</a>  
	<a>教程</a>
</div>

CSS

.breadcrumb {  
  font-size: 1.6rem;  
  color: #fff;
}
.breadcrumb a:first-child {  
  color: #82fcfd;
}
.breadcrumb a:first-child::before {  
  content: " ? ";
}
.breadcrumb a::after {  
  content: " /";  
  color: #ef6eae;
}
.breadcrumb a:last-child::after {  
  content: "";
}

知識總結

::before | ::after — 偽元素用于向某些選擇器添加特殊的效果。

content — CSS 屬性用于在元素的 ::before 和 ::after 偽元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。

:first-child — CSS偽類表示在一組兄弟元素中的第一個元素。

:last-child — CSS偽類代表父元素的最后一個子元素。

：HTML 基本結構
<html> 標記放在 HTML 文件的開頭，是一個形式上的標記；
<body> 標記稱為主體標記，網頁所要顯示的內容都放在這個標記內，它是 HTML 文件的重要所在；
<head> 標記稱為頭標記，起的作用是放置關于此 HTML 文件的信息，如提供索引、定義 CSS 樣式等；
<title> 標記稱為標題標記，起的作用是設定網頁標題；

2:開發中常用的標簽
<b>文字以粗體方式顯示</b>
<i>文字以斜體方式顯示</i>
<u>文字以加下劃線方式顯示</u>
<s>文字以加下刪除方式顯示</s>
<big>文字以放大方式顯示</big>
<small>文字以縮小方式顯示</small>
<strong>文字以加強強調方式顯示</strong>
<em>文字以強調方式顯示</em>
<address>地址標簽：xxxxxx@一只快樂的小碼農.com</address>
<code>代碼塊</code>
align 屬性控制段落的水平位置
bgcolor 屬性設置背景顏色
無序列表 ul
有序列表 ol
2.1 段落標簽<p>
2.2 換行標簽<br>
2.3 標題標簽<h1>~<h6>
2.4 文字居中標簽<center>
2.5 文字段落縮進標簽<blockquote>
<img src="">網頁中嵌入圖片（height+weigth屬性調整圖片大?。?/li>
<form action="" method="">表單提交
<align="">對齊方式-left+right+center...
<div></div>-設置塊級元素
type="radio"-單選框
type="checkbox"-復選框
<select><option></option><select>-下拉菜單

基本符號代碼轉化

3：用 HTML 建立超鏈接
3-1框架之間的鏈接
3-1-1：//frameset框架標簽中用rows屬性將窗口分為上中下三部分
<frameset rows="30%,10%,*">
<frame>
<frame>
<frame>
</frameset>
3-1-2：//用src屬性在框架中插入網頁
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frameset rows="50%,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
</html>
3-1-3//框架之間建立鏈接
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frame name="main">
</frameset>
</html>
4：下一節我們講css和js

在線咨詢

上一篇：H5網頁布局+css代碼美化，零基礎參考
下一篇：ppwjs之bootstrap表格：條紋類

您的項目需求

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

整合營銷服務商

Web開發學習筆記（34）-CSS3（8）新增特效7

知識點

知識點

知識點

前言

HTML

您的項目需求