css3新特性有哪些？

概述

• 创建圆角
• 边框阴影
• 边框图片
• 背景
• 文本效果
• 字体定义
• 2D 转换
• 3D 转换
• CSS3 动画
• 多列
• CSS3 resize
• CSS3 box-sizing
• CSS3 outline-offset

创建圆角border-radius : length length; 边框圆角。

/* 如果 / 前后的值都存在，那么 / 前面的值设置其水平半径，/ 后面值设置其垂直半径，如果没有 / ，则水平和垂直半径相等 */
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
 /* 上面写法等价于下面的写法，第一个值是水平半径，第二个值是垂直半径 */
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;

边框阴影

box-shadow 向边框添加阴影。

{box-shadow : [inset] x-offset y-offset blur-radius extension-radius spread-radiuscolor}

{box-shadow:[投影方式] X轴偏移量 Y轴偏移量 模糊半径 阴影扩展半径 阴影颜色}

div{
  /* 内阴影，向右偏移10px，向下偏移10px，模糊半径5px，阴影缩小10px */
  box-shadow: inset 10px 10px 5px -10px #888888;
}

边框图片

border-image : border-image-source || border-image-slice [ / border-image-width] || border-image-repeat
border-image ： none | image [ number | percentage]{1,4} [ / border-width>{1,4} ] ? [ stretch | repeat | round ]{0,2}

div{
  border-image:url(border.png) 30 30 round;
 
  border-image: url(border.png) 20/10px repeat;
}

背景

background-size 属性

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以设置背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。可以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

background-origin 属性

规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域，

background-clip 属性

与background-origin 属性相似，规定背景颜色的绘制区域，区域划分与background-origin 属性相同。

CSS3 允许为元素设置多个背景图像

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

文本效果

text-shadow 属性

给为本添加阴影，能够设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

 text-shadow: 5px 5px 5px #FF0000;

text-wrap 属性 设置区域内的自动换行。

text-wrap: normal | none | unrestricted | suppress | break-word;

/* 允许对长单词进行拆分，并换行到下一行 */
p {word-wrap:break-word;}

字体定义

字体需要在 CSS3 @font-face 规则中定义。

/* 定义字体 */
@font-face{
  font-family: myFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot');     /* IE9+ */
}
/* 定义粗体时使用的字体 */
@font-face{
  font-family: myFirstFont;
  src: url('/example/css3/Sansation_Bold.ttf'),
       url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
  /* 标识属性 */
  font-weight:bold;
}
div{
  font-family:myFont; /* myFirstFont */
}

2D 转换

对元素进行移动、缩放、转动、拉长或拉伸

Transform 方法汇总

3D 转换

rotateX() rotateyY() rotateZ() ……

过渡

transition : transition-property | transition-duration | transition-timing-function | transition-delay;

CSS3 动画

通过 CSS3可以创建动画，这些动画可以取代网页中的画图片、Flash 动画以及 JavaScript。

CSS3 中通过@keyframes 规则来创建动画。

animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction

多列

通过 CSS3够创建多个列来对文本进行布局，就像我们经常看到的报纸的布局一样。

CSS3 创建多列

column-count 属性规定元素应该被分隔的列数。

/* 将div中的文本分为3列 */
div{
  column-count:3;
  -moz-column-count:3;        /* Firefox */
  -webkit-column-count:3;     /* Safari 和 Chrome */
}

column-gap 属性规定列之间的间隔。

/* 设置列之间的间隔为 40 像素 */
div{
  column-gap:40px;
  -moz-column-gap:40px;        /* Firefox */
  -webkit-column-gap:40px;     /* Safari 和 Chrome */
}

column-rule 属性设置列之间的宽度、样式和颜色规则。

column-rule : column-rule-width | column-rule-style | column-rule-color

div{
  column-rule:3px outset #ff0000;
  -moz-column-rule:3px outset #ff0000;       /* Firefox */
  -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */
}

CSS3 resize

在 CSS3中resize 属性设置是否可由用户调整元素尺寸。

/* 设置div可以由用户调整大小 */
div{
  resize:both;
  overflow:auto;
}

CSS3 box-sizing

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。边框计算在width中

/* 规定两个并排的带边框方框 */
div{
  box-sizing:border-box;
  -moz-box-sizing:border-box;        /* Firefox */
  -webkit-box-sizing:border-box;     /* Safari */
  width:50%;
  float:left;
}

CSS3 outline-offset

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

• 轮廓不占用空间；

• 轮廓可能是非矩形；

/* 规定边框边缘之外 15 像素处的轮廓 */
div{
  border:2px solid black;
  outline:2px solid red;
  outline-offset:15px;
}