CSS3

边框圆角：border-radius: n px
边框阴影：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

Paste_Image.png

图片边框： border-image:

Paste_Image.png

线性渐变： background-image:linear-gradient(to top left,black,white)

Paste_Image.png

径向渐变：`background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);

Paste_Image.png

text-overflow 与 word-wrap：

Paste_Image.png

Paste_Image.png

背景相关：

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

导航栏分割线：

.nav li {
            /*background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;*/
            background-image:linear-gradient(to bottom,#dd2926,#a82724,#dd2926);
            background-repeat:no-repeat;
            background-position:right;
            background-size:1px 15px;
            
        }

效果：

Paste_Image.png

旋转：rotate()。
变形：skew()。
缩放：scale()。
位移：translate()，
translate(-50%,-50%)可轻松实现水平垂直居中。
矩阵：matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()。
原点：transform-origin:top left。
过渡:
transition-property：设定过渡属性。
transition-duration：设定过渡时间。
transition-timing-function：设定缓动函数。

Paste_Image.png

transition-delay：设定延迟时间.
关键帧：

@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}

即使用@keyframes定义动画效果，animation来引用该动画。
animation-name：引用定义的动画名。
animation-duration：设定动画持续时间。
animation-timing-function：设定缓动函数，和transition-timing-function类似。
animation-delay：设定动画延迟时间。
animation-itration-count：设定动画循环次数，infinte值为无限循环播放。
animation-direction：设定动画播放方向，默认值为normal，动画正常播放。alternate则是使动画在第奇数次正向播放，第偶数次逆向播放，当循环次数为1时，该属性无效。
animation-play-state：控制动画播放状态，paused为暂停，running为运行，且动画在暂停后再运行，会在动画停止的地方继续运行。
animation-fill-mode：控制动画关键帧外的动作。

Paste_Image.png

@keyframes redToBlue{
  from{
    background: red;
  }
  20%{
      background:green;
  }
  40%{
      background:lime;
  }
  60%{
      background:yellow;
  }
  to{
    background:blue;
  }
}

div {
  width: 200px;
  height: 200px;
  background: black;
  margin: 20px auto;
  animation-name:redToBlue;
  animation-duration: 20s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-fill-mode: none; 
}

例如该段代码，none为以初始帧黑色开始，跳到第一帧红色，直到最后一帧蓝色，最后跳到初始帧黑色。
forwards为以初始帧黑色开始，跳到第一帧红色，停留在最后一帧蓝色。
backwards为以第一帧红色开始，直到最后一帧蓝色，最后跳到初始帧黑色。
both为以第一帧红色开始，停留在最后一帧蓝色。