CSS3

• 边框
  • box-shadow

 box-shadow: 10px 10px 5px #ccc; /* 水平 垂直 模糊度 颜色 */

也可以在伪元素中添加box-shadow效果：

#boxshadow::after { /* 双冒号是CSS3中为了区分伪类新增的，用法一样 */
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}

• border-image
• border-radius
  • 三个值，左上角，右上角和左下角，右下角
  • 两个值: 左上角与右下角，右上角与左下角
  • 可创建椭圆圆角

border-radius: 50px/15px;

• 背景
  • background-image

#div1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
/*
#div1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    padding: 15px;
}
*/

• background-size

background-size:100% 100%; /* 水平 垂直 */

• background-origin

background-origin:content-box; /* 指定了背景图像的位置区域 */

• background-clip

#div1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box;  /* 背景剪裁属性是从指定位置开始绘制 */
}

• 渐变
  浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradient 函数定义，以及 径向渐变 (radial)，通过 radial-gradient 函数定义。
  • linear-gradient(渐变轴，color1,color2...)

background: linear-gradient(red, blue);            /* 从上到下 */
background: linear-gradient(to right, red , blue); /* 从左到右 */
background: linear-gradient(to bottom right, red , blue); /* 左上到右下 */
background: linear-gradient(180deg, red, blue); /* 从上到下 */
background: linear-gradient(red, green, blue); /* 从上到下均匀分布 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* 百分比是色标的位置 */
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg); /* 透明到不透明 */

• radial-gradient(圆心位置，形状 大小，color1,color2...)

background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
background: radial-gradient(ellipse closest-corner, red, yellow 10%, #1E90FF 50%, white);
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
background: radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

• repeating-linear-gradient()

background: repeating-linear-gradient(-45deg,red, red 5px, white 5px, white 10px);/* 开始点，公共色标，结束点 */

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

• 文本
  • text-shadow
  • overflow
  • word-wrap

word-wrap:break-word;

• word-break

word-break: keep-all;
word-break: break-all;

• 字体
  CSS3允许网站使用自己的字体

@font-face
{
    font-family: myFirstFont;                   /* 定义字体名称 */
    src: url(sansation_light.woff);             /* 指向字体文件 */
}
div
{
    font-family:myFirstFont;
}

• 2D变换
  • (水平，垂直) 沿坐标轴移动

transform: translate(20px, 30px);

• rotate(角度) 旋转一定角度

-webkit-transform: rotate(30deg);

• scale(水平,垂直) 将宽度和高度放大几倍

transform: scale(2,3);

• skew(ax,ay) 倾斜，第一个参数是相对于Y轴正方向的倾斜角度，即水平方向的倾斜角度；第二个参数是相对于X轴正方向的倾斜角度，即垂直方向的倾斜角度；注意是沿方向倾斜，和旋转角无关。

-webkit-transform:skew(20deg,20deg);

• matrix(n,n,n,n,n,n)矩阵，可以代替之前的CSS方法
• 3D变换
  • rotateX() 围绕X轴转动一定角度

-webkit-transform: rotateX(120deg);

• rotateY() 围绕Y轴转动一定角度
• 过渡
  transition: 属性 执行时间 [时间曲线 延迟时间];

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}
div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

• 动画

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

• 多列

column-count: 3; /* 列数 */
column-gap: 40px; /* 列间隙宽度 */
column-rule-style: solid; /* 间隙边框 */
column-rule-width: 1px;
column-rule-color: lightblue;
column-rule: 1px solid lightblue;
column-span: all;/* 指定元素中的子元素，跨越多少列，例如标题跨3列等 */
column-width: 100px; /* 指定列宽 */

• 用户界面
  • box-sizing
  • outline-offset 轮廓线偏移（轮廓线不占用空间）
• 响应式图片

img {
    max-width: 100%;
    height: auto;
}

• filter 滤镜

filter: grayscale(100%);