1.CSS3 邊框
用 CSS3热康，你可以創(chuàng)建圓角邊框俊鱼，添加陰影框那婉，并作為邊界的形象而不使用設(shè)計(jì)程序卸亮，如 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 屬性被用來(lái)添加陰影

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

<div></div>

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

<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ù)）來(lái)填充該區(qū)域。</div>
<br>
<div id="stretch">這里偎窘，圖像被拉伸以填充該區(qū)域乌助。</div>

使用的圖片：

border.png

2.CSS3 背景

• CSS3中可以通過(guò)background-image屬性添加背景圖片。
  不同的背景圖像和圖像用逗號(hào)隔開(kāi)陌知，所有的圖片中顯示在最頂端的為第一張他托。
  多張圖片，就不用用工具合成在一張背景圖片上了仆葡，可以自己來(lái)重疊使用.
  最牛的是赏参，可以單獨(dú)指定位置和是否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以前把篓，背景圖像大小由圖像的實(shí)際大小決定纫溃。
  CSS3中可以指定背景圖片，讓我們重新在不同的環(huán)境中指定背景圖片的大小韧掩。您可以指定像素或百分比大小紊浩。
  你指定的大小是相對(duì)于父元素的寬度和高度的百分比的大小。

可以設(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è)置它的話滑臊，如果顯示在邊框中口芍，文字會(huì)覆蓋在背景圖片上
    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>背景圖像邊界框的相對(duì)位置：</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>背景圖像的相對(duì)位置的內(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背景剪裁屬性是從指定位置開(kāi)始繪制。

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

#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box;//這個(gè)時(shí)候鬓椭，border下面不會(huì)涂成黃色了
}



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

3.漸變（Gradients）
CSS3 漸變（gradients）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡小染。
以前，你必須使用圖像來(lái)實(shí)現(xiàn)這些效果贮折。但是氧映，通過(guò)使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用脱货。此外，漸變效果的元素在放大時(shí)看起來(lái)效果更好律姨，因?yàn)闈u變（gradient）是由瀏覽器生成的振峻。
CSS3 定義了兩種類(lèi)型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
徑向漸變（Radial Gradients）- 由它們的中心定義

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

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

<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)的語(yǔ)法（必須放在最后） */
}
</style>
<h3>線性漸變 - 對(duì)角</h3>
<p>從左上角開(kāi)始（到右下角）的線性漸變。起點(diǎn)是紅色拔创，慢慢過(guò)渡到藍(lán)色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變利诺。</p>

還可以使用透明度呢，這個(gè)看起來(lái)效果更好：

<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)的語(yǔ)法（必須放在最后） */
}
</style>

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

• CSS3 徑向漸變
  徑向漸變由它的中心定義。
  為了創(chuàng)建一個(gè)徑向漸變君珠，你也必須至少定義兩種顏色結(jié)點(diǎn)寝志。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色。同時(shí)策添，你也可以指定漸變的中心材部、形狀（圓形或橢圓形）、大小舰攒。默認(rèn)情況下败富，漸變的中心是 center（表示在中心點(diǎn)），漸變的形狀是 ellipse（表示橢圓形）摩窃，漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）兽叮。
  語(yǔ)法

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

徑向漸變 - 顏色結(jié)點(diǎn)均勻分布（默認(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)的語(yǔ)法 */
}

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

#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)的語(yǔ)法 */
}

設(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)的語(yǔ)法 */
}

不同尺寸大小關(guān)鍵字的使用
size 參數(shù)定義了漸變的大小。它可以是以下四個(gè)值：
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)的語(yǔ)法 */
  background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}