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是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的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，让图片变灰或者变深褐色，然后悬停时候出现更加炫酷的颜色变幻。灰化的属性是filter: 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属性调整图片大小）
<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

您的项目需求