1、私有前缀

在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性

目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。

一般来说，移动端更新迭代很快，对CSS3支持良好, 因此我们在移动端没必要写太多的前缀，因为移动端的ios和Android的浏览器都是webkit内核。

css3需要增加的私有前缀

image.png

  1. -webkit-border-radius:50%; //谷歌
  2. -moz-border-radius:50%;    //火狐
  3. -ms-border-radius:50% ;    //ie
  4. -o-border-radius:50%;      //欧朋
  5. border-radius:50% ;    //标准写法

提倡写法：
image.png

css3包含哪些属性呢？ 比如说border属性：border-radius 比如说background属性：background-size等 比如说box-shadow、text-shadow，box-sizing等 比如说transform、animation、transition等

  • box-shadow：

    • 第一个值：阴影水平偏移
    • 第二个值：阴影垂直偏移
    • 第三个值：阴影的模糊度(模糊的距离)
    • 第四个值：阴影的大小
    • 第五个值：颜色
    • 第六个值：默认是outset inset 内阴影

      2、css3总结：

      image.png

      3、背景渐变

      渐变可以分为

  • 线性渐变

  • 径向渐变

    线性渐变

    线性渐变 默认是从上到下

  • 渐变的写法：

    • 从上到下（默认）：background: linear-gradient(red,blue);
    • 从左到右：background: linear-gradient(to right,red,blue);
    • 对角：background: linear-gradient(to right bottom,red,blue);
    • 角度：background: linear-gradient(45deg,red,blue);

1、从上到下

  1.  .box {
  2.       width: 400px;
  3.       height: 200px;
  4.       background: linear-gradient(red, green);
  5.       background: -webkit-linear-gradient(red, green);
  6.     }

2、从一个方向到另一个方向（left 、right 、bottom、top）

下面的例子就是从左到右

  1.  .box {
  2.       width: 400px;
  3.       height: 200px;
  4.       background: linear-gradient(to right,red, green);
  5.       background: -webkit-linear-gradient(to right,red, green);
  6.     }

3、对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角

  1.  .box {
  2.       width: 400px;
  3.       height: 200px;
  4.       background: linear-gradient(to bottom right, red, green);
  5.       background: -webkit-linear-gradient(to bottom right, red, green);
  6.     }

4、还可以是角度

  1. background:linear-gradient(90deg,red,green);
  2. background:-webkit-linear-gradient(90deg,red,green);

  • 重复线性渐变 

    1.  /* 从第30像素是黑色，然后30像素到60像素是黑变红，60到100是红变绿，剩余的空间复制很多份*/
    3.     background-image: repeating-linear-gradient(#252220 30px, #E94057 60px, #27e056 100px);

案例

1、发廊灯

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .wrap {
  10.       width: 300px;
  11.       height: 100px;
  12.       border: 1px solid #333333;
  13.       margin: 50px auto;
  14.       overflow: hidden;
  15.     }
  17.     .son {
  18.       width: 1800px;
  19.       height: 100px;
  20.       background-image: repeating-linear-gradient(45deg, #fff 0px, #ffffff 25px, #000000 25px, #000000 50px);
  21.       animation: run 10s linear infinite;
  22.     }
  24.     @keyframes run {
  25.       from {
  26.         transform: translate(0px, 0px);
  27.       }
  29.       to {
  30.         transform: translate(-1500px, 0px);
  31.       }
  32.     }
  33.   </style>
  34. </head>
  36. <body>
  37.   <div class="wrap">
  38.     <div class="son"></div>
  39.   </div>
  40. </body>
  42. </html>

发廊灯效果
image.png

径向渐变

  • radial-gradient()
    1. div {
    2.     width: 300px;
    3.     height: 300px;
    4.     /* background-image: radial-gradient(circle, red, green); */
    5.     /* 默认是椭圆，但是正方形是看不出区别的 */
    6.     background-image: radial-gradient(red, green);
    7.   }
    可以定义中心的位置，百分比相对的是宽高，要用at加上position的值
    1. div {
    2.     width: 400px;
    3.     height: 400px;
    4.     background-image: radial-gradient(circle at 25% 25%, red, yellow, green);
    5.   }
    案例—电蚊香 ```javascript <!DOCTYPE html> 

  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21621156/1639932549420-67f73eb2-b3de-4c62-b14c-b3c714fff79f.png#clientId=u098dda77-de89-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=306&id=u1b64619c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1248&originWidth=1262&originalType=binary&ratio=1&rotation=0&showTitle=false&size=79415&status=done&style=none&taskId=u41478e81-8e37-4797-ac84-67eb273911c&title=&width=309)
  2. <a name="eZTl5"></a>
  3. ## 4、less简介
  4. 定义：less是css的一门预处理的语言<br />作用：less就是就是css的加强版，可以用更少的代码实现更强大的样式<br />css中也是支持变量的，但是IE不支持
  5. ```javascript
  6. <!DOCTYPE html>
  7. <html lang="en">
  9. <head>
  10.   <meta charset="UTF-8">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.   <title>Document</title>
  13.   <style>
  14.     html {
  15.       /* 变量存储 */
  16.       --color: #a5a5a5
  17.     }
  19.     .box1 {
  20.       color: var(--color);
  21.     }
  22.   </style>
  23. </head>
  25. <body>
  26.   <div class="box1">hahhahaha</div>
  28. </body>
  30. </html>

css中也有计算属性，但是ie9以下不支持

 <style>
    html {
      /* 变量存储 */
      --color: #a5a5a5
    }

    .box1 {
      width: calc(500px/2);
      color: var(--color);
    }
  </style>

less的语法和css的语法大致上都是一样的，但是less做了一些扩展，浏览器无法执行less，所以需要讲less编译成css。
那如何编译呢？
1、在vscode中先安装一个插件（easy less）

  • less结构嵌套清晰

2、引入样式的时候必须要引入编译后的css文件才会生效

5、less语法

1、结构嵌套的关系可以这么写

.box {
  width: 200px;

  .box2 {
    width: 100px;
  }
}

2、less中的单行注释不会编译到css文件中
3、变量的使用

@width: 500px;
.box2 {
  width: @width;
  height: @width;
  background-color: lightcoral;
}

4、如果写了多个一样的变量，我们变量使用的规则是就近原则
5、变量也可以先使用然后再去声明
6、使用已有属性的值

.box2 {
  width: @width;
  height: @width;
  color: #f5f5f5;
  // 使用已有属性的值
  background-color: $color;
}

7、错误示范

.father {
    color: red;
  // 需求：hover father的时候颜色变成绿色
  .father:hover {
    color: green;
  }
}

正确的应该怎么写呢？

.father {
  color: red;
  // 需求：hover father的时候颜色变成绿色
  &:hover {
    color: green;
  }
}

6、less练习