1.CSS3 邊框
用 CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計程序，如 Photoshop

• 在 CSS3 中 border-radius 屬性被用于創(chuàng)建圓角

<style>
    div {
        border: 2px solid #a1a1a1;
        padding: 10px 40px;
        background: #dddddd;
        width: 300px;
        border-radius: 25px;
    }
</style>

<div>border-radius 屬性允許您為元素添加圓角邊框！ </div>

• CSS3 中的 box-shadow 屬性被用來添加陰影

<style>
    div {
        width: 300px;
        height: 100px;
        background-color: yellow;
        box-shadow: 10px 10px 5px #888888;
    }
</style>

<div></div>

• 有了 CSS3 的 border-image 屬性，你可以使用圖像創(chuàng)建一個邊框

<style>
    div {
        border: 15px solid ;
        width: 250px;
        padding: 10px 20px;
    }

    #round {
        -webkit-border-image: url(border.png) 30 30 round;
        /* Safari 5 and older */
        -o-border-image: url(border.png) 30 30 round;
        /* Opera */
        border-image: url(border.png) 30 30 round;
    }

    #stretch {
        -webkit-border-image: url(border.png) 30 30 stretch;
        /* Safari 5 and older */
        -o-border-image: url(border.png) 30 30 stretch;
        /* Opera */
        border-image: url(border.png) 30 30 stretch;
    }
</style>

<b>注意: </b> Internet Explorer 不支持 border-image 屬性。</p>
<p> border-image 屬性用于設(shè)置圖片的邊框。</p>

<div id="round">這里，圖像平鋪（重復(fù)）來填充該區(qū)域。</div>
<br>
<div id="stretch">這里，圖像被拉伸以填充該區(qū)域。</div>

使用的圖片：

border.png

2.CSS3 背景

• CSS3中可以通過background-image屬性添加背景圖片。
  不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。
  多張圖片，就不用用工具合成在一張背景圖片上了，可以自己來重疊使用.
  最牛的是，可以單獨指定位置和是否repeat了。

<style>
    #example1 {
        background-image: url(img_flwr.gif), url(paper.gif);
        background-position: right bottom, left top;//指定位置
        background-repeat: no-repeat, repeat;//是否repeat了
        padding: 15px;
    }
</style>

<div id="example1">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat.</p>
</div>

• background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實際大小決定。
  CSS3中可以指定背景圖片，讓我們重新在不同的環(huán)境中指定背景圖片的大小。您可以指定像素或百分比大小。
  你指定的大小是相對于父元素的寬度和高度的百分比的大小。

可以設(shè)置百分比，讓背景圖片縮放覆蓋所有
···
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
···

也可以指定大小，讓它只能如此大
···
body
{
background:url(/try/demo_source/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
···

• CSS3的background-Origin屬性
  background-Origin屬性指定了背景圖像的位置區(qū)域。
  content-box, padding-box,和 border-box區(qū)域內(nèi)可以放置背景圖像

  
  
  background-origin.gif

<style> 
div
{
    border:1px solid black;
    padding:35px;//不設(shè)置它的話，如果顯示在邊框中，文字會覆蓋在背景圖片上
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-position:left;
}
#div1
{
    background-origin:border-box;//顯示到邊框中
}
#div2
{
    background-origin:content-box;//顯示到內(nèi)容框中
}
</style>

<p>背景圖像邊界框的相對位置：</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<p>背景圖像的相對位置的內(nèi)容框：</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

• CSS3 background-clip屬性
  CSS3中background-clip背景剪裁屬性是從指定位置開始繪制。

<style>
#example1 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;//背景是全黃色的，會將border的下面也弄成黃色
}

#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box;//這個時候，border下面不會涂成黃色了
}



#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box;//這個時候，只有內(nèi)容下是黃色了，padding空出來的部分也沒有涂成黃色
}
</style>

3.漸變（Gradients）
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。
以前，你必須使用圖像來實現(xiàn)這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義

• CSS3 線性漸變
  為了創(chuàng)建一個線性漸變，你必須至少定義兩種顏色結(jié)點。顏色結(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以設(shè)置一個起點和一個方向（或一個角度）。

方向很多，可以根據(jù)實際需要設(shè)置to left,to right等等,還可以設(shè)置多個顏色

<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>
<h3>線性漸變 - 對角</h3>
<p>從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍(lán)色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>

還可以使用透明度呢，這個看起來效果更好：

<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
}
</style>

<h3>線性漸變 - 透明度</h3>
<p>為了添加透明度，我們使用 rgba() 函數(shù)來定義顏色結(jié)點。rgba() 函數(shù)中的最后一個參數(shù)可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>

• CSS3 徑向漸變
  徑向漸變由它的中心定義。
  為了創(chuàng)建一個徑向漸變，你也必須至少定義兩種顏色結(jié)點。顏色結(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。
  語法

background: radial-gradient(center, shape size, start-color, ..., last-color);

徑向漸變 - 顏色結(jié)點均勻分布（默認(rèn)情況下）

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 標(biāo)準(zhǔn)的語法 */
}

徑向漸變 - 顏色結(jié)點不均勻分布

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 標(biāo)準(zhǔn)的語法 */
}

設(shè)置形狀
shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse。

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 標(biāo)準(zhǔn)的語法 */
}

不同尺寸大小關(guān)鍵字的使用
size 參數(shù)定義了漸變的大小。它可以是以下四個值：
closest-side
farthest-side
closest-corner
farthest-corner

#grad1 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* Opera 11.6 - 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* 標(biāo)準(zhǔn)的語法 */
  background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}