经常使用CSS3属性汇总

CSS3边框

• border-radius 圆角边框

  border-radius:25px;
  复制代码

• box-shadow 边框阴影

  box-shadow: h-shadow v-shadow blur spread color inset;
  复制代码

  • h-shadow 必需。水平阴影的位置。容许负值。
  • v-shadow 必需。垂直阴影的位置。容许负值。
  • blur 可选。模糊距离。
  • spread 可选。阴影的尺寸。(blur模糊距离是算在盒子的长宽里面的，spread阴影的尺寸会增大阴影盒子的长宽)
  • color 可选。阴影的颜色。请参阅 CSS 颜色值。
  • inset 可选。将外部阴影 (outset) 改成内部阴影。

• border-image 边框图片

  border-image 属性是一个简写属性，用于设置如下属性：

  • border-image-source 边框的图片的路径
  • border-image-slice 图片边框向内偏移
  • border-image-width 图片边框的宽度
  • border-image-outset 边框图像区域超出边框的量
  • border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

CSS3背景

• background-clip 规定背景的绘制区域

  • border-box 背景被裁剪到边框盒。
  • padding-box 背景被裁剪到内边距框。
  • content-box 背景被裁剪到内容框。

• background-origin 规定 background-position 属性相对于什么位置来定位

  • padding-box 背景图像相对于内边距框来定位。
  • border-box 背景图像相对于边框盒来定位。
  • content-box 背景图像相对于内容框来定位。

• background-size 规定背景图像的尺寸

• CSS3 多重图片

  body
  { 
  background-image:url(bg_flower.gif),url(bg_flower_2.gif);
  }
  复制代码

CSS3文本

• text-overflow 规定当文本溢出包含元素时发生的事情

  • clip 修剪文本。
  • ellipsis 显示省略符号来表明被修剪的文本。
  • string 使用给定的字符串来表明被修剪的文本。

• text-shadow 向文本设置阴影

  text-shadow: h-shadow v-shadow blur color;
  复制代码

  • h-shadow 必需。水平阴影的位置。容许负值。
  • v-shadow 必需。垂直阴影的位置。容许负值。
  • blur 可选。模糊的距离。
  • color 可选。阴影的颜色。

• white-space（不是css3属性）

  • normal 默认。空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式相似 HTML 中的 pre标签。
  • nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br标签为止。
  • pre-wrap 保留空白符序列，可是正常地进行换行。
  • pre-line 合并空白符序列，可是保留换行符。
  • inherit 规定应该从父元素继承 white-space 属性的值。

CSS3字体

• @font-face 规则，使用方式：首先定义字体的名称（好比 myFirstFont），而后指向该字体文件。

  如需为 HTML 元素使用字体，请经过 font-family 属性来引用字体的名称 (myFirstFont)

  <style> 
  @font-face
  {
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9+ */
  }
  
  div
  {
  font-family:myFirstFont;
  }
  </style>
  复制代码

CSS3 2D转换

• 经过 CSS3 转换，咱们可以对元素进行移动、缩放、转动、拉长或拉伸。
• transform
  • translate(x, y) 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
  • rotate(n deg) 方法，元素顺时针旋转给定的角度。容许负值，元素将逆时针旋转。 （以旋转元素中心为旋转点）
  • scale(x, y) 方法，元素宽高变化为原始的倍数，根据给定的宽度（X 轴）和高度（Y 轴）参数
  • scale(x)
  • scale(y)

CSS3 3D转换

• transform
  • rotateX(n deg) 方法，元素围绕其 X 轴以给定的度数进行旋转。
  • rotateY(n deg) 方法，元素围绕其 Y 轴以给定的度数进行旋转。
  • rotateZ(n deg) 方法，元素围绕其 Z 轴以给定的度数进行旋转。

CSS3 过渡

• 必须规定把过渡效果添加到哪一个CSS属性上，而且规定效果的时长

• 如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开

• 语法：transition: property duration timing-function delay;

  • transition-property 规定设置过渡效果的 CSS 属性的名称。

  • transition-duration 规定完成过渡效果须要多少秒或毫秒。

  • transition-timing-function 规定速度效果的速度曲线。

    transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n); 复制代码

    • linear 以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)） 。
    • ease 规定慢速开始，而后变快，而后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
    • ease-in 以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
    • ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
    • ease-in-out 以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
    • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义本身的值。可能的值是 0 至 1 之间的数值。

  • transition-delay 定义过渡效果什么时候开始。

CSS3 动画

• @keyframes 规则用于建立动画。在 @keyframes 中规定某项 CSS 样式，就能建立由当前样式逐渐改成新样式的动画效果。 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

  0% 是动画的开始，100% 是动画的完成。

  @keyframes myfirst
  {
  from {background: red;}
  to {background: yellow;}
  }
  复制代码

• 经过animation属性将动画绑定到选择器上

  div
  {
  animation: myfirst 5s;
  -moz-animation: myfirst 5s;	/* Firefox */
  -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
  -o-animation: myfirst 5s;	/* Opera */
  }
  复制代码

  • 语法 animation: name duration timing-function delay iteration-count direction;
  • animation-iteration-count: n|infinite; 播放n次或者无限次
  • animation-direction: normal|alternate; 正常播放或者轮流反向播放

CSS3 多列

• column-count 属性规定元素应该被分隔的列数
• column-gap 属性规定列之间的间隔
• column-rule 属性设置列之间的宽度、样式和颜色规则

CSS3 用户界面

• resize 属性规定是否可由用户调整元素尺寸

  resize: none|both|horizontal|vertical;
  复制代码

• box-sizing 以确切的方式定义适应某个区域的具体内容

  content-box|border-box|inherit;
  复制代码

• outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

  • 轮廓不占用空间
  • 轮廓多是非矩形

  outline-offset: length|inherit;
  复制代码