CSS3

11 June 2018

CSS用于控制样式和布局，而CSS3是最新的CSS标准。

边框

圆角 border-radius

border-radius是向元素添加圆角边框，可使用px、百分比或em做单位。

  /* 所有角都使用半径为10px的圆角 */
  border-radius: 10px;
  /* 顺时针 左上角、右上角、右下角和左下角的圆角半径值 */
  border-radius: 5px 4px 3px 2px;

阴影 box-shadow

box-shadow是向盒子添加阴影。支持添加一个或多个。

box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

  /* 默认为外阴影，加inset表示内阴影 */
  box-shadow: 4px 2px 6px #333333;
  box-shadow: 4px 2px 6px #333333 inset;
  /* 添加多个阴影，只需用逗号隔开即可 */
  box-shadow: 4px 2px 6px #f00, 0px 0px 12px 5px #33cc00;
  /* X轴和Y轴偏移量可以设置为负数 */
  box-shadow: -4px 4px 6px #666;
  /* 阴影模糊半径：只能是正数，0表示阴影不具有模糊效果，值越大阴影的边缘越模糊 */
  /* 阴影扩展半径：可以是正负值，为正时整个阴影都延展扩大，为负则反之 */

边框图片 border-image

border-image是为边框应用背景图片，类似于background

  /* url(图片路径) */
  /* 70 切割图片的宽度，单位px，也可以使用百分比，顺时针设置 */
  /* repeat 图片延伸方式  round(平铺) repeat（重复）stretch（拉伸） */
  border-image: url(xxx.png) 70 70 70 70 repeat;

颜色

RGBA

RGB是一种色彩标准，是由红（R）、绿（G）、蓝（B）的变化以及相互叠加来得到各种的颜色。RGBA是在RGB的基础上增加了控制aplha透明度参数。

语法：color: rgba(R,G,B,A)，取值范围RGB(0 - 255)，A(0 - 1)，不可为负值。
```
  background-color:rgba(100,120,60,0.5);
```
渐变色彩

Gradient分为线性渐变(linear)和径向渐变(radial)，由于渲染引擎实现渐变的语法不同，故此处仅分析线性渐变的标准用法。

语法：linear-gradient(to bottom, #fff, #999);

第一个参数：渐变方向，可使用 “角度” 或 “英文”, 第二个和第三个参数，表示颜色的起始点和结束点，可以有很多颜色值。
```
  /* 0deg   to top 从下向上 */
  /* 90deg   to right 从左向右 */
  /* 180deg   to bottom  从上至下 （默认值） */
  /* 270deg   to left  从右向左 */
  /*          to top let  右下角到左上角    to top right 左下角到右上角 */
  background-image:linear-gradient(to left, red, orange, yellow, green, blue);
```

文字与字体

text-overflow与word-wrap

text-overflow用来设置是否使用省略标记(…)

语法：text-overflow: clip(剪切) ellipsis（显示省略标记）;

word-wrap用来设置当前行超过指定容器边界时是否断开换行，一般用浏览器默认值即可。

语法：word-wrap: normal break-word（换行）
```
  /* 若要产生省略号的效果，必须同时设置overflow: hidden;white-space:nowarp; 才能生效*/
  text-overflow: ellipsis;
  overflow: hidden;
  white-space:nowarp;
```

嵌入字体 @font-size

@font-size能够加载web服务器端的字体文件，让浏览器可以显示用户电脑没有安装的字体。

  /* src指字体文件在服务器上的相对或绝对路径 */
  /* @font-face设置后，在代码中就可以像使用普通字体(font-*)一样使用了 */
  @font-face {
      font-family: "My Font";
      src: url('Sansation_Light.ttf');
  }

  p {
      font-family: "My Font"; 
      /* 该font-family必须与@font-face中的font-family同样的值 */
  }

文本阴影 text-shadow

text-shadow用来设置文本的阴影效果

语法：text-shadow: X-Offset Y-Offset blur color;

X-Offset: 水平偏移距离，为正值时阴影向右偏移，反之阴影向左偏移；

Y-Offset：垂直偏移距离，为正值时阴影向下偏移，反之阴影向上偏移；

Blur：阴影模糊程度，必须 > 0，值越大阴影越模糊，为0表示阴影不需要模糊；

color：阴影的颜色。
```
  text-shadow: 5px 1px 1px #fff;
```

背景相关

background-origin

设置背景图片的原始起始位置

  /* border-box: 从边框开始 */
  /* padding-box：从内边距开始（默认） */
  /* content-box：从内容区域开始 */
  background-origin: border-box;

background-clip

将背景图片做适当的裁剪
background-size

设置背景图片大小，以长度值（等比缩放）或百分比显示，还可以使用cover和contain来对图片进行伸缩。

multiple backgrounds

多重背景

  width: 300px;
  height: 140px;
  border: 1px solid #999;

  background-image: url(xxx1.jpg),
                      url(xxx2.jpg),
                      url(xxx3.jpg);
  background-position: left top, 100px 0, 200px 0;
  background-repeat: no-repeat, no-repeat, no-repeat;

  margin:0 0 20px 0;

变形

旋转 rotate()

rotate()函数通过指定的角度使元素相对原点进行旋转。为正值时顺时针旋转，为负值时逆时针旋转。
```
  transform: rotate(45deg);
```
扭曲 skew()

skew() 方法让元素翻转给定的角度。
```
  transform: skew(30deg, 20deg);
```

缩放 scale()

scale()函数让元素根据中心原点对对象进行缩放。

  /* X、Y两个方向同时缩放，若没有Y值则X、Y两个方向缩放倍数一致 */
  /* 默认值为1，若值为 0 - 1 则使元素缩小，若大于 1 则使元素放大 */
  transform: scale(1.5, 0.5);
  transform: scale(1.5);

  /* scaleX(x) - X轴缩放  scaleY(y) - Y轴缩放 */

位移 translate()

translate()函数使元素从原来的位置移动，而不影响在X、Y轴上的其他组件。

  /* translate(x, y) - X轴和Y轴同时移动  translateX(x) - X轴移动  translateY(y) - Y轴移动 */
  transform: translate(50px, 100px);

rotateX()

rotateX()使元素围绕X轴以给定的度数进行旋转。
```
  transform: rotateX(120deg);
```
rotateY()

rotateY()使元素围绕Y轴以给定的度数进行旋转。
```
  transform: rotateY(130deg);
```

动画

transition

元素从一种样式变换为另一种样式时为元素添加效果

  /* 简写属性，简写同时设置4个过渡属性 */
  transition: width 1s linear 2s;

  /* 设置过渡的CSS属性名称  none(没有属性)   all(所有属性)   property(某属性) */
  transition-property: width;
  /* 设置过渡花费的时间，0表示没有过渡效果 */
  transition-duration: 1s;
  /* 设置过了的事件曲线 linear  ease(默认)   ease-in  ease-out   ease-in-out 或自定义cubic-bezier */
  transition-timing-function: linear;
  /* 设置过渡效果何时开始，默认0 */
  transition-delay: 2s;

@keyframes

@keyframes使元素从一种样式逐渐变化为另一种样式的效果。

  @keyframes mymove
  {
      from {top:0px;}
      to {top:200px;}
  }

  @keyframes mymove
  {
      0%   {top:0px;}
      25%  {top:200px;}
      50%  {top:100px;}
      75%  {top:200px;}
      100% {top:0px;}
  }

  animation: mymove 5s linear 2s infinite alternate;

  /* 设置@keyframes动画名称 */
  animation-name: mymove;
  /* 设置动画时长 */
  animation-duration: 5s;
  /* 设置动画的速度曲线  linear  ease(默认) ease-in  ease-out  ease-in-out  cubic-bezier */
  animation-timing-function: linear;
  /* 设置动画延迟时间 */
  animation-delay: 2s;
  /* 设置动画播放次数 infinite(无限次播放) */
  animation-iteration-count: infinite;
  /* 设置动画是否在下一次播放时逆向播放 normal  alternate(反向播放) */
  animation-direction: alternate;
  /* 设置动画是否正在运行或暂停 paused(暂停) running(播放) */
  animation-play-state: running;

用户界面

resize

resize允许用户通过拖动方式来改变元素的大小

  /* none(不允许拖动)  both(拖动改变高度和宽度)  horizontal(拖动改变宽度)  vertical(拖动改变高度)
    inherit */
  resize: horizontal;

outline

outline:外轮廓，与border相似但不占用网页布局空间，轮廓可能是非矩形。

  /* solid(实线) dotted(点状) dashed(虚线) double(双线) */
  outline:2px solid red;
  /* 边框偏移量 */
  outline-offset: 15px;

box-sizing

语法：box-sizing: content-box border-box inherit;
```
  box-sizing: border-box;
```