CSS3邊框：
1.CSS3圓角：border-radius 屬性——創建邊框線的圓角
<body style="font-size:24px; color:#60F;"> 20px圓角 <div style="width:200px; height:100px; border:1px solid red; border-radius:20px;"></div> 20%圓角 取寬的20%和高的20% <div style="width:200px; height:100px; border:1px solid red; border-radius:20%;"></div> </body> 50px圓角 <div style="width:200px; height:100px; border:1px solid red; border-radius:50px;"></div> 50%圓角 取寬的50%和高的50% <div style="width:200px; height:100px; border:1px solid red; border-radius:50%;"></div> </html>
值的類型可以是像素，也可以為百分比。
2.CSS3盒子陰影： box-shadow 屬性——創建陰影
值有3個時，表示距離左側、距離上側、影子顏色
值有4個時，表示距離左側、距離上側、虛化的像素、影子顏色
值有5個時，表示距離左側、距離上側、虛化的像素、影子顏色、是否顯示在內部並且將顏色進行反轉
<body style="font-size:24px; color:#60F;"> 右側有30px陰影 <div style="width:100px; height:50px; background-color:#6F3; box-shadow:30px 0px gray;"></div> 下側30px有陰影 <div style="width:100px; height:50px; background-color:#6F3; box-shadow:0px 30px gray;"></div><br /> <br /> 右下側各有30px陰影 <div style="width:100px; height:50px; background-color:#6F3; box-shadow:30px 30px gray;"></div><br /> <br /> 右下側各有30px陰影並且虛化10px <div style="width:100px; height:50px; background-color:#6F3; box-shadow:30px 30px 10px gray;"></div> <br /> <br /> 右下側各有30px陰影並且虛化10px，但是超出部分不顯示，僅僅顯示在外邊框內部的部分，顏色進行互換 <div style="width:100px; height:50px; background-color:#6F3; box-shadow:30px 30px 10px gray inset;"></div> </body>
3.CSS3邊界圖片：border-image 屬性——可以允許使用圖片作為邊框，把圖片中間部分進行了拉伸, border-image屬性在IE和QQ等瀏覽器中並不兼容!
style type="text/css"> body { font-size:24px; color:#60F;} div { border-width:15px; width:250px; padding:10px 20px; } #round { border-image:url(images/border.png) 30 30 round; } #stretch { border-image:url(images/border.png) 30 30 stretch; } </style> </head> <body> <div id="round">在這里，圖像平鋪（重復），以填補該地區。</div> <br /> <div id="stretch">在這里，圖像被拉伸以填補該地區。</div> <p>下面是使用圖像:</p> <img src="images/border.png" /> </body>
CSS3背景：
1.背景圖片大小：background-size 屬性——可以規定背景圖片的尺寸
兩個值，分別表示寬度，高度。可用像素和百分比。
<style> body { background-image:url(images/bg_flower.gif); background-size:60px 100px; background-repeat:no-repeat; font-size:24px; color:#60F; } </style> </head> <body><br /> <br /> <br /> <br /> <br /> <p>上面使用的是背景圖片。下面是原始圖片</p> <img src="images/bg_flower.gif" /> </body>
2.背景圖片定位：background-origin 屬性——規定背景根據邊框定位還是根據文本定位
border-box：根據邊框定位
content-box：根據文本進行定位
<style> body { font-size:24px; color:#60F; } div { border:1px solid black; padding:35px; background-image:url(images/bg_flower.gif); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:content-box; } </style> </head> <body> <p>background-origin:border-box;</p> <div id="div1"> 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 </div> <p>background-origin:content-box;</p> <div id="div2"> 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。 </div> </body>
3.多重背景圖片：background-image 屬性——可以規定多張不相同的圖片疊加出現效果，最好使用矢量圖。
寫法中使用逗號隔開引用圖片即可。
<body style="background-image:url(images/bg_flower.gif), url(images/border.png); background-repeat:no-repeat;"> </body>
CSS3文本效果：
1.文本陰影：text-shadow 屬性——可以向文本應用陰影效果
四個值：分別代表距離左側、距離上側、模糊程度及陰影顏色
<style>
body
{
font-size:24px;
color:#60F;
}
h1
{
text-shadow:5px 5px 5px red;}
h2
{
text-shadow:10px 10px 5px yellow;}
</style>
</head>
<body>
<h1>文字特效！！！</h1>
<h2>狂拽酷炫吊炸天</h2>
</body>
2.文本自動換行：word-wrap 屬性——允許文本強制文本進行換行，這意味着會對單詞進行拆分，值：break-word：允許對單詞進行拆分換到下一行。
<style> p.test { width:11em; border:1px solid #000000; word-wrap:break-word; } </style> </head> <body style="font-size:24px; color:#60F;"> 這個是沒有規定自動換行的 <p style="width:11em; border:1px solid #000000;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> <br /> <br /> 這個是規定了自動換行的 <p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> </body>
CSS3裝換：
通過CSS3轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
轉換是使元素改變形狀、尺寸、位置的一種效果。
我們可以使用2D或3D轉換來轉換我們的元素。
1. 2D轉換：transform屬性——變形、轉換
內置方法：rotate()——進行旋轉，括號內部寫旋轉角度，默認順時針旋轉允許負值，元素將進行逆時針旋轉
<style> .a { width:300px; height:200px; background-color:#3F0;} .b { width:300px; height:200px; background-color:#3F0; transform:rotate(30deg); margin:50px; } .c { width:300px; height:200px; background-color:#3F0; transform:rotate(90deg); margin:80px; } </style> </head> <body style="font-size:24px; color:#60F;"> <div class="a">這是正常的div</div> <div class="b">這個是進行了30度轉動的div</div> <div class="c">這個是進行了90度轉動的div</div> </body>
內置方法：translate()——從當前位置進行移動，括號內為x，y值(允許負值，將反方向移動)
<style> body { font-size:24px; color:#60F;} div { width:200px; height:115px; background-color:yellow; border:1px solid black; } #aa { transform:translate(30px,30px);} </style> </head> <body> <div>你好。這是一個 div 元素。</div> <div id="aa">這是向右30px，向下30px的div</div> </body>
內置方法：scale()——改變原始尺寸，按照倍數變化，括號內為width、height的倍數
<style> body { font-size:24px; color:#60F;} div { width:200px; height:115px; background-color:yellow; border:1px solid black; } #aa { transform:scale(2,4); margin:200px;} </style> </head> <body> <div>你好。這是一個 div 元素。</div> <div id="aa">這是將寬度變為2倍，高度變為4倍的div，內部文字尺寸也會跟着改變</div> </body>
內置方法：skew()——水平、垂直方向進行扭轉，括號內是水平扭轉角度、垂直扭轉角度
<style> body { font-size:24px; color:#60F;} div { width:200px; height:115px; background-color:yellow; border:1px solid black; } #aa { transform:skew(30deg,0deg); margin:50px;} #bb { transform:skew(0deg,30deg); margin:50px;} #cc { transform:skew(30deg,30deg); margin:50px;} </style> </head> <body> <div>你好。這是一個 div 元素。</div> <div id="aa">這是將橫向扭轉30度的div，內部文字會跟隨扭轉</div> <div id="bb">這是將縱向扭轉30度的div，內部文字會跟隨扭轉</div> <div id="cc">這是將橫向扭轉30度、縱向扭轉30度的div，內部文字會跟隨扭轉</div> </body>
2. 3D轉換：transform屬性——變形、轉換
內置方法：rotateX()——沿水平X軸進行垂直的翻轉，括號內寫轉動度數
<style> body { font-size:24px; color:#60F;} div { width:200px; height:115px; background-color:yellow; border:1px solid black; } #aa { transform:rotateX(180deg);} #bb { transform:rotateX(120deg); opacity:0.5;} </style> </head> <body> <div>你好。這是一個 div 元素。</div> <div id="aa">這是將div沿水平軸進行的垂直對翻180度之后的樣子</div> <div id="bb">這是將div沿水平軸進行的垂直對翻120度之后的樣子</div> </body>
內置方法：rotateY()——沿垂直Y軸進行水平的翻轉，括號內寫轉動度數
<style> body { font-size:24px; color:#60F;} div { width:200px; height:115px; background-color:yellow; border:1px solid black; } #aa { transform:rotateY(180deg);} #bb { transform:rotateY(120deg); } </style> </head> <body> <div>你好。這是一個 div 元素。</div> <div id="aa">這是將div沿y軸進行的水平對翻180度之后的樣子</div> <div id="bb">這是將div沿y軸進行的水平對翻120度之后的樣子</div> </body>
2D轉換跟3D轉換的區別：2D轉換僅僅在於平面，文字可以看出並沒有反過來
3D轉換是相當於鏡面效果的，進行了前后空間（涉及到了Z軸）的占用進行的翻轉。
2D與3D的不同翻轉示例：效果圖請自行查看
<style> body { font-size:24px; color:#60F;} div { width:200px; height:115px; background-color:yellow; border:1px solid black; transition:0.7s; } #aa:hover { transform:rotate(180deg);} #bb:hover { transform:rotateY(180deg);} </style> </head> <body> <div id="aa">這是2D轉動</div> <div id="bb">這是3D翻轉</div>
CSS3過度：
CSS3過渡：transition 屬性——專門應對顏色、長度、寬度、位置等變化的過渡
通過CSS3，我們可以在不使用Flash和JavaScript的情況下，為當前某元素從某樣式改變為某樣式的時候添加過渡效果。
我們僅僅使用到了一個transition屬性，專門來寫過渡從一個樣式到另一個樣式過渡時所花費的時間，以秒為單位。若時長不規定，默認為0，即沒有過渡時間。
在使用這個過渡效果的時候，我們使用了類似於超鏈接的l(link)、v(visited)、h(hover)、a(active)樣式的控制。
此過渡時間可以規定背景改變、位置改變、及上面看到過的2D轉換、3D轉換再加上位置改變等樣式變化需要使用的時間長度。
我們的樣式屬性過渡可以分開單獨應對寬度、高度、顏色、2D、3D轉換來設置過渡時間。
示例：css3過度（顏色的過度，位置的過度，尺寸的過度）
<style> body { font-size:24px; color:#60F;} div { width:200px; height:115px; background-color:yellow; border:1px solid black; } #aa{ } #aa:hover { background-color:#F39;} #bb{ transition:1s; } #bb:hover { background-color:#F39;} #bg { width:200px; height:200px; border:1px solid red; position:relative; margin-left:200px;} #tb { position:relative; left:0px; top:0px; transition:0.7s;} #tb:hover { left:-200px;} #tb:active { left:-400px;} #kuan { width:200px; height:200px; border:1px solid blue; position:relative; transition:1s;} #kuan:hover { width:400px; height:150px;} </style> </head> <body> 背景顏色改變： <div id="aa">這個是普通的換背景顏色</div> <div id="bb">這個是加上過渡時間的換背景顏色</div> <br /> <br /> 位置改變：可以直接使用在大圖輪播上。不需要引用Jquery就可以實現滑動過渡效果。 輪播可以用這樣的表格加上過度，來回實現 <div id="bg"> <table id="tb" width="600" height="200" cellpadding="0" cellspacing="0"> <tr> <td><img src="images/bg_flower.gif" width="200" height="200" /></td> <td><img src="images/border.png" width="200" height="200" /></td> <td><img src="images/bg_flower.gif" width="200" height="200" /></td> </tr> </table> </div> <br /> <br /> <div id="kuan">這里是寬度、高度改變。原始寬200px，高200px；改變后寬400px，高150px</div> </body>
主要使用hover和active：
hover：當我們鼠標指向的時候使用的樣式
active：當鼠標點擊下去的時候使用的樣式
過度效果的大圖輪播
<style> body { min-width:900px;} #datu { width:800px; height:500px; position:relative; margin:30px auto; overflow:hidden;} #ta { margin-left:0px; transition:0.7s;} .lr { position:absolute; top:230px; width:32px; height:32px; z-index:99;} #left { left:10px; } #right { right:10px; } </style> </head> <body> <div id="datu" onmouseover="pause()" onmouseout="conti()"> <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500"> <td width="800"><img src="Images/1.jpg" /></td> <td width="800"><img src="Images/2.jpg" /></td> <td width="800"><img src="Images/3.jpg" /></td> <td width="800"><img src="Images/4.jpg" /></td> <td width="800"><img src="Images/5.jpg" /></td> </tr> </table> <div class="lr" id="left" onclick="dong(-1)"> <img src="Images/left.png" /> </div> <div class="lr" id="right" onclick="dong(1)"> <img src="Images/right.png" /> </div> </div> </body> </html> <script> document.getElementById("ta").style.marginLeft="0px"; function huan() { var tu =document.getElementById("ta"); var a=parseInt(tu.style.marginLeft); if(a<=-3200) { tu.style.marginLeft="0px"; } else { tu.style.marginLeft= (a-800)+"px"; } shi =window.setTimeout("huan()",3000); } var shi =window.setTimeout("huan()",3000); function pause() { window.clearTimeout(shi); } function conti() { shi = window.setTimeout("huan()",3000); } function dong(ad) { var tu =document.getElementById("ta"); var a=parseInt(tu.style.marginLeft); if(ad==-1) { if(a==0) { tu.style.marginLeft=-3200+"px"; } else { tu.style.marginLeft= (a+800)+"px"; } } else { if(a==-3200) { tu.style.marginLeft=0+"px"; } else { tu.style.marginLeft= (a-800)+"px"; } } } </script>
CSS3動畫：
通過CSS3，我們能夠創建動畫，這樣可以在許多網頁中取代動畫圖片、Flash動畫以及JavaScript動畫。
想要創建CSS3動畫，需要遵循@keyframes規則。
@keyframes規則用於創建動畫。在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
注：IE需要10及以上。
創建好動畫之后需要綁定到某個選擇器，否則不會產生任何動畫效果。
使用animation進行動畫捆綁。兩個值：動畫名稱、時長。
時間長度必須規定，否則默認為0。也就是表示沒有動畫效果。
<style> body{font-size:24px; color:#60F;} div{ width:300px; height:300px; background:red; animation:myfirst 5s;/*動畫捆綁，兩個值，動畫名稱、時長*/ } @keyframes myfirst { /*創建動畫，使用@keyframes規則*/ from {background:red;} to {background:yellow;} /*將背景顏色從red改為yellow，時間長度在外部定義*/ } </style> </head> <body> <div></div><br /> 本示例是將此div的背景顏色由紅色轉變為黃色。<br /> 使用@keyframes規則寫了一個動畫，然后在選擇器中將此動畫捆綁到了div上。<br /> 捆綁使用了animation。時間長度寫在選擇器中捆綁之后。<br /> 必須規定時間長度，否則默認為0。也就是沒有動畫。 </body>
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
可以改變任意多的樣式以及任意多的次數。
我們一般情況下使用0%~100%來規定動畫發生的時機。或者使用關鍵詞from...to...，效果等同於0%~100%。
0%是動畫的開始，100%是動畫的完成。
為了得到最佳的瀏覽器支持，我們將始終使用百分比來進行規定動畫
<style> body{font-size:24px; color:#60F;} div{ width:300px; height:300px; background:black; animation:myfirst 5s;/*動畫捆綁，兩個值，動畫名稱、時長*/ } @keyframes myfirst { 0% {background:red;}/*動畫開始樣式*/ 25% {background:yellow;} 50% {background:blue;} 100% {background:green;}/*動畫結束樣式*/ } </style> </head> <body> <div></div><br /> 注意：一上來就進行動畫。動畫在完成之后會直接變回初始樣式（黑色背景）。<br /> <br /> 上面動畫效果是：開始時為紅色背景，25%時為黃色背景，50%時為藍色背景，100%時為綠色背景。 </body>
以上示例中只進行了一個樣式的改變。接下來我們看多項改變。
多項改變時只需要在每個百分號后的花括號內寫上就可以了。
<style> body{font-size:24px; color:#60F;} div{ width:300px; height:300px; background:black; position:relative;/*由於需要進行位置改變，所以增加了position屬性*/ animation:myfirst 5s;/*動畫捆綁，兩個值，動畫名稱、時長*/ } @keyframes myfirst {/*改變位置和背景顏色*/ 0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;} 25% {background:yellow; border-radius:0px; left:400px; top:0px;} 50% {background:blue; border-radius:90px; left:400px; top:300px;} 75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;} 100% {background:red; border-radius:20px; left:0px; top:0px;} } </style> </head> <body> 本示例中，更改了背景顏色以及定位、陰影效果三個樣式。<br /> 動畫完成之后還是直接恢復初始樣式。 <div></div> </body>
在以上示例中，我們的動畫只能進行一次就立馬停止了。我們想要此動畫效果持續執行，就只需要在我們的綁定選擇器的動畫名稱和時長之后加上一個infinite值就可以無限執行了。
注：infinite——無限。
<style> body{font-size:24px; color:#60F;} div{ width:300px; height:300px; background:black; position:relative;/*由於需要進行位置改變，所以增加了position屬性*/ animation:myfirst 5s infinite;/*動畫捆綁，兩個值，動畫名稱、時長，加上一個無限執行*/ } @keyframes myfirst {/*改變位置和背景顏色*/ 0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;} 25% {background:yellow; border-radius:0px; left:400px; top:0px;} 50% {background:blue; border-radius:90px; left:400px; top:300px;} 75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;} 100% {background:red; border-radius:20px; left:0px; top:0px;} } </style> </head> <body> 本示例中，更改了背景顏色以及定位、陰影效果三個樣式。<br /> 由於本動畫在捆綁選擇器時添加了一個infinite值，那么本動畫將無限執行下去。<br /> <div></div> </body>
我們可以看出在上一個示例中，div的運行速度是開始慢，中間快，結束放慢的。這是默認的ease屬性帶來的效果，若想讓所有速度相同，我們可以在綁定選擇器之后寫上linear即可。
注：ease——默認開始慢慢加速，結束時慢慢減速。
linear——默認始終使用相同速度運行。
<style> body{font-size:24px; color:#60F;} div{ width:300px; height:300px; background:black; position:relative;/*由於需要進行位置改變，所以增加了position屬性*/ animation:myfirst 5s infinite linear;/*動畫捆綁，兩個值，動畫名稱、時長，加上一個無限執行*/ } @keyframes myfirst {/*改變位置和背景顏色*/ 0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;} 25% {background:yellow; border-radius:0px; left:400px; top:0px;} 50% {background:blue; border-radius:90px; left:400px; top:300px;} 75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;} 100% {background:red; border-radius:20px; left:0px; top:0px;} } </style> </head> <body> 本示例中，更改了背景顏色以及定位、陰影效果三個樣式。<br /> 本動畫在捆綁選擇器時添加了一個infinite值，本動畫將無限執行下去。添加了一個linear值，那么運行時會勻速。<br /> <div></div> </body>
在以上所有無限動畫示例中，我們可以看出動畫是按照我們寫好的順序一直在執行，我們可不可以將它設置為交替執行呢？答案是可以的。
在捆綁選擇器的動畫名稱、時長、無限次數后面寫上一個alternate即可。
注：alternate——交替執行（也可以成為正反執行）
<style> body{font-size:24px; color:#60F;} div{ width:300px; height:300px; background:black; position:relative;/*由於需要進行位置改變，所以增加了position屬性*/ animation:myfirst 5s infinite alternate;/*動畫捆綁，兩個值，動畫名稱、時長，加上一個無限執行，交替執行*/ } @keyframes myfirst {/*改變位置和背景顏色*/ 0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;} 25% {background:yellow; border-radius:0px; left:400px; top:0px;} 50% {background:blue; border-radius:90px; left:400px; top:300px;} 75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;} 100% {background:red; border-radius:20px; left:0px; top:0px;} } </style> </head> <body> 本示例中，更改了背景顏色以及定位、陰影效果三個樣式。<br /> 由於本動畫在捆綁選擇器時添加了一個infinite值，那么本動畫將無限執行下去。<br /> 在無限執行的基礎之上增加了一個alternate值，那么本動畫會進行正反交替執行。 <div></div> </body>
以上這些就是我們常用到的一些CSS3的樣式屬性，當然還有很多其他的，比如將文本像在報紙上一樣排列等。以后有時間覺得有用的會在整理！
<style> body { min-width:900px;} #datu { width:800px; height:500px; position:relative; margin:30px auto; overflow:hidden;} #ta { margin-left:0px; transition:0.7s;} .lr { position:absolute; top:230px; width:32px; height:32px; z-index:99;} #left { left:10px; } #right { right:10px; } </style> </head> <body> <div id="datu" onmouseover="pause()" onmouseout="conti()"> <table id="ta" cellpadding="0" cellspacing="0"> <tr height="500"> <td width="800"><img src="Images/1.jpg" /></td> <td width="800"><img src="Images/2.jpg" /></td> <td width="800"><img src="Images/3.jpg" /></td> <td width="800"><img src="Images/4.jpg" /></td> <td width="800"><img src="Images/5.jpg" /></td> </tr> </table> <div class="lr" id="left" onclick="dong(-1)"> <img src="Images/left.png" /> </div> <div class="lr" id="right" onclick="dong(1)"> <img src="Images/right.png" /> </div> </div> </body> </html> <script> document.getElementById("ta").style.marginLeft="0px"; function huan() { var tu =document.getElementById("ta"); var a=parseInt(tu.style.marginLeft); if(a<=-3200) { tu.style.marginLeft="0px"; } else { tu.style.marginLeft= (a-800)+"px"; } shi =window.setTimeout("huan()",3000); } var shi =window.setTimeout("huan()",3000); function pause() { window.clearTimeout(shi); } function conti() { shi = window.setTimeout("huan()",3000); } function dong(ad) { var tu =document.getElementById("ta"); var a=parseInt(tu.style.marginLeft); if(ad==-1) { if(a==0) { tu.style.marginLeft=-3200+"px"; } else { tu.style.marginLeft= (a+800)+"px"; } } else { if(a==-3200) { tu.style.marginLeft=0+"px"; } else { tu.style.marginLeft= (a-800)+"px"; } } } </script>