<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3變形，陰影和漸變背景色屬性</title> </head> <!-- 變形【transform】 向元素應用2d或3d轉換。該屬性允許我們對元素進行旋轉，縮放，移動或傾斜 transform參數： rotate（角度值）：旋轉 translate（x，y）：移動 scale（x，y）：縮放 skew（x，y）：扭曲 matrix（a,b,c,d,e,f）:矩陣 變形【transform】 改變元素基點 transform-origin:x y; 改變transform動作的基點（中心點）。 對象陰影【box-shadow】 語法：box-shadow:投影方式 x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色； 可以使用一個或多個投影，如果使用多個投影時必須用逗號，分開。 另外，還可以通過inset來設置對象的內陰影 背景顏色線性漸變【linear-gradient】 語法： background:linear-gradient(起點，起點顏色，過度顏色【可選】，終點顏色)； 起點：top是從上到下，left是從左到右。如果定義成left top，那就是從左上角到右下角 過渡色：可以插入多個，表示多種顏色的漸變 --> <style> .transform{ width: 1000px; background-color: #fdfdfd; margin:50px auto; } .transform:after{ clear:both; content: ' '; display: block; overflow: hidden; } .transform > p{ width: 230px; float: left; border:1px #999 solid; margin-right: 10px; text-align: center; padding-bottom: 10px; } .transform > p strong{ display: block; background-color: #eee; font-size: 20px; line-height: 28px; font-family: "MicrosoftYaHei"; color:#333; margin-bottom: 10px; } .transform > p span{ display: block; width: 100px; height: 100px; margin:0 auto; border:1px #ccc solid; background-color: #09f; } .transform.origin > p span{ background-color: #0c0; /* 改變基點 */ transform-origin:0 -40px; } .transform > p .roate{ transform:rotate(20deg); } .transform > p .translate{ transform:translate(20px,20px); } .transform > p .scale{ transform:scale(.5); } .transform > p .skew{ transform:skew(20deg,-30deg); } </style> <body> <div class="transform"> <p> <strong>旋轉(roate)</strong> <span class="roate"></span> </p> <p> <strong>移動(translate)</strong> <span class="translate"></span> </p> <p> <strong>縮放(scale)</strong> <span class="scale"></span> </p> <p> <strong>扭曲（skew)</strong> <span class="skew"></span> </p> </div> <div class="transform origin"> <p> <strong>旋轉(roate)</strong> <span class="roate"></span> </p> <p> <strong>移動(translate)</strong> <span class="translate"></span> </p> <p> <strong>縮放(scale)</strong> <span class="scale"></span> </p> <p> <strong>扭曲（skew)</strong> <span class="skew"></span> </p> </div> </body> </html>
