百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

Web开发学习笔记(34)——CSS3(8)新增特效7

liuian 2025-01-02 17:47 52 浏览

（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 函数有固定的尺寸，通过重复渐变来填充元素。

相关推荐

2023年最新微信小程序抓包教程（微信小程序 抓包）

声明：本公众号大部分文章来自作者日常学习笔记，部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载，请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档（软件测试面试怎么说）

前言又到了毕业季，我们将会迎来许多需要面试的小伙伴，在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中，隐藏着的...

复活，视频号一键下载，有手就会，长期更新(2023-12-21)

视频号下载的话题，也算是流量密码了。但也是比较麻烦的问题，频频失效不说，使用方法也难以入手。今天，奶酪就来讲讲视频号下载的新方案，更关键的是，它们有手就会有用，最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员，还是做爬虫、逆向的爬虫工程师和安全逆向工程，必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具，脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具：Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles，今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解，网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本，而AppStore是高于21.1.0版本，本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代，各行各业对数据采集的需求日益增多，网络爬虫的运用也更为广泛，越来越多的人开始学习网络爬虫这项技术，K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章，为实现从易到难全方位覆盖，特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代，应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中，保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio（以下称TestStudio）是一个易于使用的自动化测试工具，可用于Web、WPF应用的界面功能测试，也可以用于API测试，以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析（wireshark抓包总结）

0.引言Wireshark（前称Ethereal）是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包，并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口，直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解（加密方式、证书原理、中间人攻击）HTTPS协议的加密方式有哪些？HTTPS证书的原理是什么？如何防止中间人攻击？一：HTTPS基本介绍：1.HTTPS是什么：HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序（APP）的数据接口需要进行以下步骤：首先，确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具，并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢？我们经常在用的手机手机里面的数据怎么对它抓包呢？那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶，建议收藏

学习Fiddler工具之前，我们先了解一下Fiddler工具的特点，Fiddler能做什么？如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议，默认端口：443(2)HTTP协议（HyperTextTransferProtocol）：超文本传输协议。默认...

一周热门
最近发表
标签列表