016 渐变一个transform可以有多个变换函数，多个变换函数，后面的在前面的基础上变换。 2d,3d变换只影影响视

渐变

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      height: 200px;
      background-image: linear-gradient(red, black);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

取元素自身大小，可以设置高度

div{
  		background-size: 50px 50px;
      background-repeat: space;
}

div{
  background-image: linear-gradient(to right, red, black, blue, yellow);
  /*to right bottom|135deg 从12点方向开始 顺时针计算角度 0deg从下向上*/
}

div{
    background-image: linear-gradient(to right, red, black 25%, black 50%, white 50%, blue);
}

div{
  div {
      height: 200px;
      background-image: linear-gradient(to right, black, white 50%, black 1px);
    background-image: linear-gradient(to right, red 14%, orange 0, orange 28%, yellow 0, yellow 42%, green 0, green 56%, aqua 0,
          aqua 70%, blue 0, blue 86%, purple 0, purple);
      /*是从最左面开始的地方数1px 1px小于前面的值就取前面值 相等可以颜色突变*/
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      height: 200px;
      /* background-image: linear-gradient(45deg, red 25%, yellow 0, yellow 50%, red 0, red 75%, yellow 0, yellow);
      background-size: 50px 50px;
      background-repeat: repeat; */
      background-image: repeating-linear-gradient(45deg, red, red 10%, yellow 10%, yellow 20%);
      /*它会在所有方向上重复渐变以覆盖其整个容器*/
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

给字加波浪线

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      font-size: 32px;
    }

    span {
      background-image: linear-gradient(135deg, transparent 33%, black 33%, black 34%, transparent 0), linear-gradient(45deg, transparent 66%, black 66%, black 67%, transparent 0);
      background-size: 10px 5px;
      background-repeat: repeat-x;
      background-position: 0 100%;
    }
  </style>
</head>

<body>
  <div>
    <span>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae odit assumenda odio rerum quam quae saepe.
      Tempore blanditiis a minus aut adipisci mollitia nam ut. Velit dolorum optio tempora perspiciatis.
    </span>
  </div>
</body>

</html>

div{
  text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff,0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
}
/* 通过添加text-shadow 看上去断线效果 */

div{
  background-image: radial-gradient(red, black);
  /*默认的形状是ellipse
  radial-gradient(circle,red, black)
  改变圆心位置radial-gradient(circle at 30% 30%,red, yellow,blue,black)
  radial-gradient(closest-corner circle at 30% 30%,red, yellow,blue,black)   closest-side farthest-corner farthest side 渐变结束位置 圆心最近的边，角落
  支持repeating*/
  
}

任务花波浪线

例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      height: 200px;
      background-image: linear-gradient(to right bottom, black, white 50%, transparent 50%), linear-gradient(to left bottom, black, white 50%, black 50%);
    }

    .radials {
      height: 200px;
      background-image: radial-gradient(closest-side circle at 20% 50%, white, black 95%, transparent), radial-gradient(closest-side circle at 50% 50%, white, black 95%, transparent), radial-gradient(closest-side circle at 80% 50%, white, black 95%, transparent);
    }
  </style>
</head>

<body>
  <div></div>
  <div class="radials"></div>
</body>

</html>

div {
      height: 500px;
      background-color: #026873;
      background-image: linear-gradient(to right, rgba(255, 255, 255, .07) 50%, transparent 50%),
        linear-gradient(to right, rgba(255, 255, 255, .13) 50%, transparent 50%),
        linear-gradient(to right, transparent 50%, rgba(255, 255, 255, .17) 50%),
        linear-gradient(to right, transparent 50%, rgba(255, 255, 255, .19) 50%);
      background-size: 13px, 29px, 37px, 53px;
    }

半径渐变

div {
      background-image: conic-gradient(red, orange, yellow, green, aqua, blue, purple);
      height: 200px;
      width: 200px;
    }

div {
      background-image: conic-gradient(white 25%, black 0, black 50%, white 0, white 75%, black 0);
      height: 200px;
      width: 200px;
      background-size: 20px 20px;
    }

 div {
      height: 200px;
      padding: 5px;
      background-image: linear-gradient(white, white), repeating-linear-gradient(45deg, white 0, white 10%, red 10%, red 20%);
      background-clip: content-box, border-box;
      transition: 10s;
    }

    div:hover {
      background-position: 0 0, 0px -1000px;
    }

svg

<?xml version="1.0"?>
<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" stroke="blue" stroke-width="3" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

transform

一个transform可以有多个变换函数，多个变换函数，后面的在前面的基础上变换。
- rotate
```
div{
  transform:rotate(20deg);
 /*rad,turn*/
}
```
2d,3d变换只影影响视觉效果，不影响布局。位置高于常规流。
光栅化
==定位高于 transform 高于inline高于float高于block高于bg-image高于bg-color高于负z-index==
tranform-origin
- 变换的源点，不动点
- 默认值是垂直和水平中心
- 接受left，right，top，bottom，center
- 如果一个值，当做水平值，垂直被当做center

div{
  transform-origin:0 0;
  等价于
  transform-origin:left top;

	transform-origin:100% 100%;
  等价于
  transform-origin:right bottom;
}

translate 平移
- 元素旋转，坐标系也跟着旋转，平移基于旋转的坐标系。
- ==百分比以自己的宽高为基准==

div{
  transform:translate(10px,10px)
  等价于
  transform:translateX() translateY()
}

绝对居中方案子元素比父元素大也可以

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      position: relative;
      background-color: rgba(0, 0, 0, 0.1);
    }

    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: red;
    }
  </style>
</head>

<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab eius eaque, perspiciatis aliquam praesentium aperiam
    voluptas impedit suscipit minima accusantium dolor distinctio, porro harum optio corrupti <span>vel alias fugit
      magni.</span>
  </div>
</body>

</html>

scale

div{
 transform:scale(0.5,2); 
 transform:scale(-1,1);
 /*水平翻转 坐标轴也会跟着旋转*/
 
 transform:scale(-0.5,1) translate(40px) 
   /*坐标轴也会被拉伸 0.5*40=20px */
}

skew 倾斜把矩形变成平行四边形
矩阵变换

div{
  transform:matrix(2,0,0,2,0,0)
    /*后两位是水平偏移*/ 
   
    skew
  transform:matrix(1,tan(angle),0,1,X,Y;)
  transform:matrix(1,0,tan(angle),1,X,Y;)
    
    rotate
   transform:matrix(cos,sin,-sin,cos,X,Y) 
}

==transform hover时想要让属性一一变换，属性写的顺序要一一对应。不然直接计算出最开始的样子和最终的样子，直接变换==