• 邊框
  • box-shadow

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

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

#boxshadow::after { /* 雙冒號是CSS3中為了區(qū)分偽類新增的，用法一樣 */
    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
  • 三個值，左上角，右上角和左下角，右下角
  • 兩個值: 左上角與右下角，右上角與左下角
  • 可創(chuàng)建橢圓圓角

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; /* 指定了背景圖像的位置區(qū)域 */

• background-clip

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

• 漸變
  瀏覽器支持兩種類型的漸變：線性漸變 (linear)，通過 linear-gradient 函數(shù)定義，以及 徑向漸變 (radial)，通過 radial-gradient 函數(shù)定義。
  • 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);/* 開始點，公共色標，結(jié)束點 */

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允許網(wǎng)站使用自己的字體

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

• 2D變換
  • (水平，垂直) 沿坐標軸移動

transform: translate(20px, 30px);

• rotate(角度) 旋轉(zhuǎn)一定角度

-webkit-transform: rotate(30deg);

• scale(水平,垂直) 將寬度和高度放大幾倍

transform: scale(2,3);

• skew(ax,ay) 傾斜，第一個參數(shù)是相對于Y軸正方向的傾斜角度，即水平方向的傾斜角度；第二個參數(shù)是相對于X軸正方向的傾斜角度，即垂直方向的傾斜角度；注意是沿方向傾斜，和旋轉(zhuǎn)角無關。

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

• matrix(n,n,n,n,n,n)矩陣，可以代替之前的CSS方法
• 3D變換
  • rotateX() 圍繞X軸轉(zhuǎn)動一定角度

-webkit-transform: rotateX(120deg);

• rotateY() 圍繞Y軸轉(zhuǎn)動一定角度
• 過渡
  transition: 屬性 執(zhí)行時間 [時間曲線 延遲時間];

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; /* 列數(shù) */
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%);