前端基础——CSS3基础

1. 渐变背景

• 提出：
  比较规则的渐变背景可以采用切片的方式，切1px渐变背景图片然后进行平铺，而不规则的渐变只能引入整张图片，可拓展新比较低，还会影响网页的加载速度。
  因此CSS3提出渐变背景background-image的属性，包括线性渐变和径向渐变

• 线性渐变
  概念：渐变的颜色过度是沿着一条直线进行渐变
  语法：background-image: linear-gradient(to 方向,颜色1 位置1，颜色2 未知2 ,...)

<style>
        .box1{
            width: 400px;
            height: 300px;
            background-image: linear-gradient(to right top,pink 0%,
            lightblue 70%,lightyellow 100%);
            border: 1px solid red;
        }
</style>

色标：色标是由一个颜色和一个位置构成，决定了渐变过渡的范围。其中颜色可以用rgb、#、单词表示，位置可以用百分比或者像素表示颜色开始渐变的位置。
需要注意的是：
- 如果不设置位置，只设置颜色，那么默认颜色是均匀渐变
- 如果首尾不设置位置，那么默认是0%和100%。如果设置其他范围，则首尾部分的颜色是纯色填充
- 如果两个色标的位置相同，会出现断层的效果，因为两个颜色渐变的范围是0，无法显示渐变过渡的效果
渐变线：可以决定渐变的方向
- 语法格式一：to 方向(left right top bottom)——单独或两两结合使用，放在颜色的前面，用逗号隔开
- 语法格式二：角度，以deg为单位，垂直向上是0deg，顺时针是正方向，逆时针是负方向
-
重复线性渐变
- 重复线性渐变可以实现线性渐变的重复效果，使色标在渐变的方向上无限重复
- 语法：纯色重复线性渐变：background-image: repeating-linear-gradient(pink 开始位置,pink 结束位置,yellow 开始位置,yellow 结束位置);

<style>
        .box1{
            width: 400px;
            height: 300px;
            background-image: repeating-linear-gradient(pink 0%,
            pink 20px,yellow 20px,yellow 40px);
            border: 1px solid red;
        }
</style>

另外一种非纯色重复线性渐变，只需background-image: repeating-linear-gradient(pink 开始位置,yellow 开始位置);,即设置两个开始位置即可

<style>
        .box1{
            width: 400px;
            height: 300px;
            background-image: repeating-linear-gradient(pink 0px,yellow 20px);
            border: 1px solid red;
        }
    </style>

实现条纹叠加

方案一：两个盒子叠加，并设置透明度opacity:0.3
方案二：使用一个盒子，但在颜色的设置上采用包含透明度的颜色，语法格式为rgba(0~255,0~255,0~255,0~1)。然后再添加一个叠加属性，以逗号隔开，前面的渐变图层会盖住后面的渐变图层
注意：多种渐变或者图片同时设置在background-image属性上时，中间使用逗号隔开，前面的图片或者渐变背景会盖住后面的

.box1{
           width: 300px;
           height: 300px;
           border: 1px solid red;
           background-image: repeating-linear-gradient(-45deg,
           rgba(255,0,0,0.3) 0px,
           rgba(255,0,0,0.3) 20px,
           rgba(247, 239, 11, 0.3) 20px,
           rgba(247, 239, 11, 0.3) 40px),
           /* 两个repeating-linear-gradient以逗号隔开 */
           repeating-linear-gradient(45deg,
           rgba(255,0,0,0.3) 0px,
           rgba(255,0,0,0.3) 20px,
           rgba(247, 239, 11, 0.3) 20px,
           rgba(247, 239, 11, 0.3) 40px);
        }

• 径向渐变
  径向渐变即椭圆渐变，渐变就是沿着椭圆的半径进行渐变。语法为background-image:radial-gradient(半径大小 形状 圆心位置，颜色1 位置1，颜色2 位置2，...)
  内容：包括椭圆和色标
  • 椭圆：用来控制渐变的位置，大小，形状等
  1. 圆心的位置at 位置，位置可以为单词(left,right,bottom,top)，百分比，x轴y轴像素，默认是从最中间开始向外发散
  2. 控制形状：ellipse:默认值，椭圆；circle:正圆
  3. 控制大小，即控制半径：
     farthest-corner:半径是从圆心到最远的角；
     closest-corner:半径是从圆心到最近的角；
     farthest-side：半径是从圆心到最远的边；
     closest-side：半径是从圆心到最近的边。
  • 色标：是由一个颜色和一个位置组成，用来控制渐变的过渡效果

重复径向渐变
重复渐变的首尾的颜色的位置不在0或者100%，重复渐变才有效

.box1{
           width: 300px;
           height: 300px;
           background-image: repeating-radial-gradient(circle,pink 0px,
           pink 10px,lightblue 10px,lightblue 20px);
        }

2. 圆角

盒子默认四个角都是直角，可以通过border-radius设置圆角

• 分别设置每个角，border-top-left-radius:5px等；
• 复合属性设置：border-radius:0px 2px 3px 4px;
  顺时针旋转设置四个角，从左上开始。
  如果两个值，则是对角线位置圆角设置；
  三个值为左上、正对角线、右下圆角设置；
  八个值：border-radius:10px 10px 10px 10px/20px 20px 20px 20px，/代表每个角的椭圆的水平轴，后面为垂直轴

原理
本来每个角应该是两个值，分别为椭圆的长轴和短轴，然后取椭圆的四分之一圆作为设置的圆角。当为正圆时，就只需要设置一个值即可。
内半径和外半径
- 如果盒子设置边框，边框宽度大于圆角的半径时，边框里面没有圆角效果。原因：当边框宽度大于圆角半径时，内半径为0或者负数，因此直接取消内部的圆角显示
- 当边框宽度小于圆角半径时，边框外层的圆角是由外半径决定的，边框内层的圆角是由内半径决定的
- 内半径=外半径-边框宽度。

.box1{
           width: 300px;
           height: 300px;
           border: 20px solid red;
           /* 圆角半径大于边框宽度 */
           border-radius: 50px;
        }

应用
- 绘制正圆border-radius: 50%;，要求宽高相同。
- 绘制胶囊状：border-radius: 盒子短边的一半;

.box1{
           width: 100px;
           height: 100px;
           border-radius: 50%;
           background-color: pink;
        }
        .box2{
           width: 100px;
           height: 40px;
           border-radius: 20px;
           background-color: tomato;
        }

3. 阴影

盒子阴影：给盒子添加阴影，使用box-shadow
语法：
- box-shadow:x轴偏移量 y轴偏移量 虚化程度 阴影大小 阴影颜色
- 虚化程度，阴影大小可以不写
- 将外阴影设置为内阴影，box-shadow:x轴偏移量 y轴偏移量 虚化程度 阴影大小 阴影颜色 inset;
- 可以设置多层阴影，中间用逗号隔开：box-shadow:阴影1，阴影2，…;
文字阴影：给文本添加阴影，使用text-shadow属性
语法：
- text-shadow: x轴偏移量 y轴偏移量 虚化程度 阴影颜色

.box1{
            width: 300px;
            height: 300px;
            font-size: 20px;
            padding: 30px;
            border: 1px solid red;
            text-shadow: 12px 9px 2px red;
        }

4. css兼容问题

兼容问题来源
- 内核是浏览器最底层最核心的代码，决定了浏览器如何解析网页、页面如何被加载、脚本如何执行等功能
- 不同的浏览器有不同的内核。每种浏览器对相同的网页有不同的解析方式，最终结果不一样，将这中现象称为兼容性问题
浏览器内核
- 目前主流浏览器：chrome firefox IE edg safira opera
- 国产浏览器：360、搜狗、猎豹、QQ、UC
内核的作用
- 解析网页：包括html解析、CSS解析、Javascript解析
- 渲染引擎：
1. HTMl解析器：会将html代码解析为一个DOM树，上面每个标签就是DOM树上的节点;
2. CSS解释器：将CSS样式计算出来，calc函数
3. Javascript解释器：允许Javascript脚本运行的环境；
4. 布局模块(layout)：主要是网页中模块定位、浮动、排列等操作。

网页如何解析出来的？

1. 加载网页代码：判断是否为网络资源，如果是就利用网络模块从网络地址中加载网页代码，如果不是网络资源而是本地文件，则直接从本地存储的文件中加载网页的代码到浏览器内核中去
2. 经过HTML解析器对代码进行解析：浏览器从第一行代码开始解析，把不同类型的代码（html css JavaScript）交给对应的解析器
3. 内部表示：将各个解析器中的结果进行综合和梳理。把标签和对应的CSS样式结合起来，包括javaScript脚本也是作用在指定的标签上的。每个标签都有自己的渲染对象
4. 布局和绘图：会把每个标签的样式、位置都绘制在页面上，如果需要使用到图片、视频、音频等，再利用对应的模块（图片解码器等）进行处理，处理完成后，直接显示在页面上
兼容性问题处理

• hack 代码：专门针对特定浏览器设置css代码。这个过程称为css hack
  兼容性问题自查网址：https://caniuse.com/
• 主要学习IE hack代码
  • 属性前缀法：给特定的浏览器的css样式属性前添加一些前缀，方便特定的浏览器进行识别，以达到预期的页面效果
    
  • 选择器前缀法：
  • 条件注释法：通过注释的语法完成样式的引入，注释语法中可以检测浏览器类型或版本，以<!-- [endif] -->开始，以<!-- [endif] -->结束，中间放置适用于条件浏览器的样式设置link

<body>
    <!-- [if IE] -->
    里面的内容只在IE浏览器中显示
    通常里面链接写的特定的样式
    <!-- [endif] -->

    <!-- [if IE 6] -->
    里面的内容只在IE6浏览器中显示
    <!-- [endif] -->

    <!-- [if gte IE6] -->
    里面的内容只在IE6以上版本的浏览器中显示
    <!-- [endif] -->

    <!-- [if lte IE6] -->
    里面的内容只在IE6以下版本的浏览器中显示
    <!-- [endif] -->

    <!-- [if ! IE6] -->
    里面的内容在非IE6浏览器中显示
    <!-- [endif] -->
</body>

兼容问题处理指导思想
- 优雅降级：先不管兼容问题，直接以目前主流浏览器为主，实现页面最佳效果，然后再考虑低版本的浏览器，针对低版本的浏览器书写css代码，保证其有较好的页面效果；
- 渐进增强：先把网页的内容搭建好，不考虑效果，再内容不受影响的情况下，逐步添加对应的页面效果。先考虑大多数都能正常运行的浏览器，然后再给高版本的浏览器添加对应的页面效果。

每日问题

• span标签在垂直方向上不支持margin，因此要设置行列转换
• 在hover时，样式的转换可以设计一个过渡时间，在原来的样式上设置过渡transition: all 0.5s;