CSS3字型示例，背景圖，變形基點等。。。
指定自動換行的處理方法
<style>
#div1{word-break:keep-all;
當word-break屬性使用keep-all引數值時，對於中文來說，只能在半形空格
或連字元或者任何標點符號的的地方換行，中文與中文之間不能換行。
}
#div2{
word-wrap:break-word;
word-wrap屬性可以使用屬性值為normal與break-word兩個。使用normal屬性
值時瀏覽器保持預設處理，只在半形空格連字元的地方進行換行。使用break-word時
瀏覽器可在長單詞或url地址內部進行換行
}
</style>
</head>
<body>
<div id="div1">
在Interent Explorer瀏覽器中，當word-break屬性使用keep-all引數值時，
對於中文來說，只能在半形空格或者連字元或者任何標點符號的地方換行，中文與
中文之間不能換行。
</div>
<br/>
<hr/>
<div id="div2">
This is a veryveryveryveryveryveryveryveryveryveryveryveryvery long word
</div>
@font-face屬性中可以指定的屬性值：
定義斜體或粗體字型：
<style>
@font-face{
font-family:WebFont;
src:url('Fontin_Sans_R_45b.otf')format("opentype");
}
@font-face{
font-family:WebFont;
font-style:italic;
src:url('Fontin_Sans_I_45b.otf')format("opentype");
}
@font-face{
font-family:WebFont;
font-weight:bold;
src:url('Fontin_Sans_B_45b.otf')format("opentype");
}
@font-face{
font-family:WebFont;
font-style:italic;
font-weight:bold;
src:url('Fontin_Sans_BI_45b.otf')format("opentype");
}
div{
font-family:WebFont;
font-size:40px;
}
div#div1{
font-style:normal;
font-weight:normal;
}
div#div2{
font-style:italic;
font-weight:normal;
}
div#div3{
font-style:normal;
font-weight:bold;
}
div#div4{
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<div id="div1">Text Sample1</div>
<div id="div2">Text Sample2</div>
<div id="div3">Text Sample3</div>
<div id="div4">Text Sample4</div>
</body>
字型不同導致文字大小的不同：
<style>
div#div1{
font-family:Comic Sans MS;
font-size:16px;
}
div#div2{
font-family:Tahoma;
font-size:16px;
}
div#div3{
font-family:Arial;
font-size:16px;
}
div#div4{
font-family:Times New Roman;
font-size:16px;
}
</style>
</head>
<body>
<div id="div1">Text Sample1</div>
<div id="div2">Text Sample2</div>
<div id="div2">Text Sample3</div>
<div id="div2">Text Sample4</div>
</body>
inline-table標籤的用法：
<style>
table{
border: solid 3px #00aaff;
}
td{
border:solid 2px #ccff00;
padding:10px;
}
</style>
</head>
<body>
您好
<table>
<tr>
<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
</tr>
<tr>
<td>F</td><td>G</td><td>H</td><td>I</td><td>J</td>
</tr>
<tr>
<td>K</td><td>L</td><td>M</td><td>N</td><td>O</td>
</tr>
</table>
你好
<style>
table{
display:inline-table;
border: solid 3px #00aaff;
}
td{
border:solid 2px #ccff00;
padding:10px;
}
</style>
</head>
<body>
您好
<table>
<tr>
<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
</tr>
<tr>
<td>F</td><td>G</td><td>H</td><td>I</td><td>J</td>
</tr>
<tr>
<td>K</td><td>L</td><td>M</td><td>N</td><td>O</td>
</tr>
</table>
你好
</body>
如果在display屬性中將元素的型別設定為list-item型別，可以將多個元素作為列表來顯示，同事在元素的開頭加上列表的標記。
<style>
div{
display:list-item;
list-style-type:circle;
margin-left:30px;
}
</style>
</head>
<body>
<div>示例div1</div>
<div>示例div2</div>
<div>示例div3</div>
<div>示例div4</div>
</body>
<style>
dl#runin dt{
display:run-in;
border:solid 2px red;
}
dl#compact dt{
display:compact;
border:solid 2px red;
}
dd{
margin-left:100px;
background-color:yellow;
}
</style>
</head>
<body>
<dl id="runin">
<dt>名詞一</dt>
<dd>關於"名詞一"的名詞解釋。</dd>
</dl>
<dl id="compact">
<dt>名詞二</dt>
<dd>關於“名詞二”的名詞解釋</dd>
</dl>
</body>
<style>
.table{
display:table;/*代表整個表格*/
border:solid 3px #00aaff;
}
.caption{
display:table-caption;/*代表整個表格的標題*/
text-align:center;
}
.tr{
display:table-row;/*代表表格中的一行*/
}
.td{
display:table-cell;/*代表表格中的單元格*/
border:solid 2px #aaff00;
padding:10px;
}
.thead{
display:table-header-group;/*代表表格中的腳註部分*/
background-color:#ffffaa;
}
.none{
display:none;//設定隱藏內容
}
</style>
</head>
<body>
<div class="table">
<div class="caption">字母表</div>
<div class="thead">
<div class="tr">
<div class="td">1st</div>
<div class="td">2st</div>
<div class="td">3st</div>
<div class="td">4st</div>
<div class="td">5st</div>
</div>
</div>
<div class="tr">
<div class="td">A</div>
<div class="td">B</div>
<div class="td">C</div>
<div class="td">D</div>
<div class="td">E</div>
</div>
<div class="tr">
<div class="td">F</div>
<div class="td">G</div>
<div class="td">H</div>
<div class="td">I</div>
<div class="td">J</div>
</div>
</div>
<div>示例文字1</div>
<div class="none">示例文字2</div>
<div class="none">示例文字3</div>
<div>示例文字4</div>
</body>
overflow屬性使用方法：
<style>
div{
width:300px;
height:150px;
border:solid 1px orange;
overflow:auto;/*如果設定auto,則當文字超出div元素的容納範圍時根據需要出現水平滾動條或垂直滾動條，並且滾動顯示超出容納範圍的內容*/-->
overflow:scroll;/*超出內容隱藏，則div元素中將被出現固定的水平滾動條與垂直滾動條，文字超出div元素的容納範圍時被滾動顯示。*/-->
overflow:visible;/*設定為visible時，則與不使用overflow屬性時的顯示效果一樣。*/
overflow-x:hidden;/*設定指定水平方向向上*/
overflow-y:scroll;/*設定指定垂直方向向上的滾動條*/
}
</style>
</head>
<body>
<div>
<h1>標題文字</h1>
<p>示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
</p>
<p>示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
</p>
</div>
</body>
</html>
text-overflow:ellipsis屬性，box-shadow屬性的用法：
<style>
.class{
overflow:hidden;
text-overflow:ellipsis;/*設定ellipsis，在div元素的末尾會出現一個省略號*/
white-space:nowrap;/*設定nowrap，使得盒的右端內容不能換行顯示。這樣盒中的內容就在水平方向溢位*/
width:300px;
border:solid 1px orange;
}
.div1{
background-color:#ffaa00;
box-shadow:10px 10px 10px gray;/*box-shadow屬性讓盒在顯示時產生陰影效果。*/
width:200px;
height:100px;
}
.div2{
background-color:red;
box-shadow:10px 10px 0px gray;
width:200px;
height:100px;
}
.div3{
background-color:green;
box-shadow:-10px -10px 10px gray;
width:200px;
height:100px;
}
.div4{
background-color:blue;
box-shadow:0px 0px 50px #000000;
width:200px;
height:100px;
}
span{
background-color:#ffaa00;
box-shadow:10px 10px 10px #000000;
}
.div6:first-letter{
font-size:22px;
float:left;
background-color:#ffaa00;
box-shadow:5px 5px 5px #000000;
}
table{
border-spacing:10px;
box-shadow:5px 5px 20px #000000;
}
td{
background-color:#ffaa00;
box-shadow:5px 5px 5px #000000;
padding:30px;
}
</style>
</head>
<body>
<div class="class">
這是一句非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常的長的例句
</div>
<hr/>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<br/>
<br/>
<br/>
<br/>
<div class="div3">div3</div>
<br/>
<br/>
<br/>
<br/>
<div class="div4">div4</div>
<br/>
<br/>
<br/>
<br/>
<div class="div5 ">
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
<span> 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字</span> 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
<span> 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字</span> 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
</div>
<br/>
<br/>
<br/>
<br/>
<div class="div6">請看以一個字的變化</div>
<br/>
<br/>
<br/>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>0</td>
</tr>
</table>
</body>
<style>
.class{
overflow:hidden;
text-overflow:ellipsis;/*設定ellipsis，在div元素的末尾會出現一個省略號*/
white-space:nowrap;/*設定nowrap，使得盒的右端內容不能換行顯示。這樣盒中的內容就在水平方向溢位*/
width:300px;
border:solid 1px orange;
}
.div1{
background-color:#ffaa00;
box-shadow:10px 10px 10px gray;/*box-shadow屬性讓盒在顯示時產生陰影效果。*/
width:200px;
height:100px;
}
.div2{
background-color:red;
box-shadow:10px 10px 0px gray;
width:200px;
height:100px;
}
.div3{
background-color:green;
box-shadow:-10px -10px 10px gray;
width:200px;
height:100px;
}
.div4{
background-color:blue;
box-shadow:0px 0px 50px #000000;
width:200px;
height:100px;
}
span{
background-color:#ffaa00;
box-shadow:10px 10px 10px #000000;
}
.div6:first-letter{
font-size:22px;
float:left;
background-color:#ffaa00;
box-shadow:5px 5px 5px #000000;
}
table{
border-spacing:10px;
box-shadow:5px 5px 20px #000000;
}
td{
background-color:#ffaa00;
box-shadow:5px 5px 5px #000000;
padding:30px;
}
</style>
</head>
<body>
<div class="class">
這是一句非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常的長的例句
</div>
<hr/>
<div class="div1">div1</div>
<br/>
<div class="div2">div2</div>
<br/>
<br/>
<br/>
<br/>
<div class="div3">div3</div>
<br/>
<br/>
<br/>
<br/>
<div class="div4">div4</div>
<br/>
<br/>
<br/>
<br/>
<div class="div5 ">
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
<span> 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字</span> 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
<span> 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字</span> 示例文字 示例文字
示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字 示例文字
</div>
<br/>
<br/>
<br/>
<br/>
<div class="div6">請看以一個字的變化</div>
<br/>
<br/>
<br/>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>0</td>
</tr>
</table>
</body>
box-sizing屬性使用示例：
<style>
div{
width:300px;
border:solid 30px #000000;
padding:30px;
background-color:red;
margin:20px auto;
}
div#div1{
/*第一個元素的box-sizing屬性中指定了content-box屬性值，所以元素內容部分的寬度為30px;
元素的總寬度為：元素內容部分的寬度300px+內容補白部分寬度30px x 2+邊框寬度30px x 2=
420px;*/
box-sizing:content-box;
}
div#div2{
/*第二個元素的box-sizing屬性中指定了border-box屬性值，所以元素中的總寬度為300px,元素
內容部分的寬度=元素總寬度300px-內部補白部分30px x 2-邊框寬度30px x 2=180px;*/
box-sizing:border-box;
}
</style>
</head>
<body>
<div id="div1">示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
</div>
<div id="div2">示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
</div>
</body>
與背景相關的新增屬性:
<style>
div{
background-color:black;
background-image:url(../html5/images/bg.png);
border:dashed 15px green;
padding:30px;
color:white;
font-size:30px;
font-weight:bold;
}
.div1{
-moz-background-clip:border;
-webkit-background-clip:border;
}
.div2{
-moz-background-clip:padding;
-webkit-background-clip:padding;
}
</style>
</head>
<body>
<div class="div1">示例文字1</div><br/>
<div class="div2">示例文字2</div>
</body>
</html>
指定繪製背景影象的繪製起點-background-oigin屬性：
<style>
div{
background-color:black;
background-image:url(../html5/images/bg.png);
border:dashed 15px green;/*邊框為1畫素，虛線，顏色為#dff299*/
padding:30px;
color:white;
font-size:2em;
font-weight:bold;
}
div.div1{
/*background-origin屬性為border時代表邊框左上角*/
-moz-background-origin:border;
-moz-background-origin:border;
}
div.div2{
/*background-origin屬性為padding時代表邊框內部補白區域的左上角*/
-moz-background-origin:padding;
-webkit-background-origin:padding;
}
div.div3{
/*background-origin屬性為content時代表內容的左上角開始繪製*/
-moz-background-origin:content;
-webkit-background-origin:content;
}
</style>
</head>
<body>
<div class="div1">示例文字1</div><br/>
<div class="div2">示例文字2</div><br/>
<div class="div3">示例文字3</div>
</body>
background-size屬性的使用示例:
<style>
div{
/*background-size屬性來指定背景影象尺寸的最簡單的方法如下所示*/
background-color:black;
background-image:url(../html5/images/bg.png);
padding:30px;
color:white;
font-size:2em;
font-weight:bold;
background-size:40px 20px;
}
div{
/*在background-size屬性時，可以將寬度與高度重的一個引數省略，只指定其中一個引數，瀏覽器將改值
作為寬度值，高度預設值為auto*/
background-color:black;
background-image:url(../html5/images/bg.png);
padding:30px;
color:white;
font-size:2em;
font-weight:bold;
background-size:auto 20px;
}
</style>
</head>
<body>
<div>示例文字</div><br/>
</body>
<style>
div{
/*background-size:50% 50%在指定寬度與高度時，也可以使用百分比的值作為引數。這時，在瀏覽器中
將指定的百分比視為影象尺寸除以整個邊框區域的尺寸後得出的百分比來處理。*/
background-color:black;
background-image:url(../html5/images/bg.png);
border:dotted 15px yellow;
color:white;
font-size:2em;
font-weight:bold;
background-size:50% 50%;
}
</style>
</head>
<body>
<div>示例文字</div><br/>
</body>
<!--通過指定多個bacgkround-images、background-repeat、bacground-position
background-clip,background-origin,background-size.-->
<style>
div{
background-image:url(../html5/images/bg.png),
url(../html5/images/dw.jpg);
background-repeat:no-repeat,repeat-x,no-repeat;
background-position:3% 98%,85%,center center,top;
width:700px;
padding:90px 0px;
}
</style>
</head>
<body>
<div></div>
</body>
border-radius屬性
<style>
div{
border:dashed 5px blue;
border-radius:20px;
background-color:skyblue;
padding:20px;
width:180px;
}
</style>
</head>
<body>
<div>示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字
</div>
指定四個角設定不同的半徑
<style>
div{
border:solid 5px blue;
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
background-color:skyblue;
padding:20px;
width:180px;
}
</style>
</head>
<body>
<div>示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字
</div>
<style>
div{
border:solid 5px;
border-image:url(../hmtl5/images/bg.png)18 18 18 18/18px;
-webkit-border-image:url(../html5/images/bg.png)18 18 18 18/18px;
-moz-border-image:url(../html5/images/bg.png)18 18 18 18/18px;
width:300px;
}
</style>
</head>
<body>
<!--四個角上的border-top-left-image、border-top-right-image、border-bottom-left-image、
border-bottom-right-image這四部分是沒有任何展示效果，不會平鋪，不會重複，也不會拉昇，類似
於視覺中盲點的的意思。
對於border-top-image、border-left-image、border-right-image、border-bottom-image
這四部分，瀏覽器分別做為上邊框使用影象，左邊框使用影象，有邊框使用影象，下邊框使用影象來進行顯示，
必要時可以將這四部分的影象進行平鋪或伸縮。-->
<div>示例文字</div>
</body>
border-image屬性用法：
<style>div{
/*border-image:url(影象檔案的路徑)A B C D
-webkit-border-image:url(影象檔案的路徑)A B C D
-moz-border—image:url(影象檔案的路徑)A B C D
border-image屬性值中至少要值定5個引數，其中第一個引數為邊框所使用的檔案路徑，A,B,
C,D四個引數表示當瀏覽器自動把邊距所使用到的影象進行分隔時的上邊距，右邊距，下邊距，
左邊距。*/
border:solid 5px;
border-image:url(../hmtl5/images/bg.png)18 18 18 18;
-webkit-border-image:url(../html5/images/bg.png)18 18 18 18;
-moz-border-image:url(../html5/images/bg.png)18 18 18 18;
width:300px;
}
</style>
</head>
<body>
<!--四個角上的border-top-left-image、border-top-right-image、border-bottom-left-image、
border-bottom-right-image這四部分是沒有任何展示效果，不會平鋪，不會重複，也不會拉昇，類似
於視覺中盲點的的意思。
對於border-top-image、border-left-image、border-right-image、border-bottom-image
這四部分，瀏覽器分別做為上邊框使用影象，左邊框使用影象，有邊框使用影象，下邊框使用影象來進行顯示，
必要時可以將這四部分的影象進行平鋪或伸縮。-->
<div>示例文字</div>
</body>
指定四條邊中影象的顯示方法：
border-image：url（檔案路徑）A B C D/border-width top bottom letfright
<style>
div{
border-image:url(../html5/images/bg.png)18/5px repeat repeat;
-webkit-border-image:url(../html5/images/bg.png)18/5px repeat repeat;
-moz-border-image:url(../html5/images/bg.png)18/5px repeat repeat;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div></div>
</body>
<style>
div{
/* repeat+stretch可以將上下兩條邊中影象的顯示方式指定為平鋪顯示，左右兩條邊中影象的顯示方式指定
為拉伸顯示，或者將上下兩條邊中影象的顯示方法指定為拉伸顯示，左右兩邊中影象的顯示方式制定為平鋪
顯示。使用第一種指方式時，中央影象在水平方向為平鋪顯示，垂直方向拉伸顯示；使用第二種指定方式
時，中央影象在水平方向為拉伸顯示，垂直方向為平鋪顯示。*/
border-image:url(../html5/images/bg.png)18/5px repeat stretch;
-webkit-border-image:url(../html5/images/bg.png)18/5px repeat stretch;
-moz-border-image:url(../html5/images/bg.png)18/5px repeat stretch;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div></div>
</body>
<style>
div{
/*round將顯示方法指定為round時與顯示方法指定為repeat時類似，都是將影象進行平鋪顯示，
區別在於如果最後顯示的一幅影象不能被完全顯示時，如果能夠顯示部分不到的影象一半，就不顯
示最後的影象，然後擴大前面的影象，使顯示區域正好完整平鋪全部影象；如果能夠顯示的部分超
過影象的一半，就顯示最後的影象，但是將全部顯示的影象縮小，使顯示區域正好完整平鋪全部影象。*/
border-image:url(../html5/images/bg.png)18/5px round round;
-webkit-border-image:url(../html5/images/bg.png)18/5px round round;
-moz-border-image:url(../html5/images/bg.png)18/5px round round;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div></div>
</body>
transform功能分類：
scale縮放
<style>
div{
/*使用scale方法來實現文字或影象的縮放處理，在引數中指定縮放倍率。比如scale(0.5)
表示縮小50%*/
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}
</style>
</head>
<body>
<div>示例文字</div>
<style>
div{
/*使用scale方法來實現文字或影象的縮放處理，在引數中指定縮放倍率。比如scale(0.5)
表示水平縮小50%,垂直方向放大一倍*/
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
-webkit-transform:scale(0.5,2);
-moz-transform:scale(0.5,2);
-o-transform:scale(0.5,2);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
skew傾斜角度
<style>
div{
/*使用skew方法來實現文字或影象的傾斜處理，在引數中分別指定水平方向上的傾斜角度與垂直方向
上的傾斜角度。例如：skew(30deg,30deg) 表示水平方向上傾斜30度，垂直方向上傾斜30度。*/
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
-webkit-transform:skew(30deg,30deg);
-moz-transform:skew(30deg,30deg);
-o-transform:skew(30deg,30deg);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
<style>
div{
/*使用skew方法來實現文字或影象的傾斜處理，在引數中分別指定水平方向上的傾斜角度與垂直方向
上的傾斜角度。例如：skew(30deg) 表示水平方向上傾斜30度*/
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
-webkit-transform:skew(30deg);
-moz-transform:skew(30deg);
-o-transform:skew(30deg);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
<style>
div{
/*使用translate方法來將文字或影象進行移動，在引數中分別指定水平向上的移動距離與垂直
方向的移動距離。例如：translate（50px,50px) 表示水平向上移動50畫素，垂直方向上
移動50畫素。*/
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
-webkit-transform:translate(50px,50px);
-moz-transform:translate(50px,50px);
-o-transform:translate(50px,50px);
}
div{
/*使用translate方法來將文字或影象進行移動，在引數中分別指定水平向上的移動距離與垂直
方向的移動距離。例如：translate（50px,50px) 表示水平向上移動50畫素。*/
width:300px;
margin:150px auto;
background-color:yellow;
text-align:center;
-webkit-transform:translate(50px);
-moz-transform:translate(50px);
-o-transform:translate(50px);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
旋轉元素
<style>
div{
/*首先向右移動150px,向下移動200px。然後在旋轉45度，並且放大1.5倍。*/
width:300px;
background-color:yellow;
text-align:center;
-webkit-transform:translate(150px,200px) rotate(45deg) scale(1.5);
-moz-transform:translate(150px,200px) rotate(45deg) scale(1.5);
-o-transform:translate(150px,200px) rotate(45deg) scale(1.5);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
<style>
div{
/*首先旋轉45度，並且放大1.5倍。然後向右移動150px，向下移動200px.*/
width:300px;
background-color:yellow;
text-align:center;
-webkit-transform:rotate(45deg) scale(1.5) translate(150px,200px);
-moz-transform:rotate(45deg) scale(1.5) translate(150px,200px);
-o-transform:rotate(45deg) scale(1.5) translate(150px,200px);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
不改變變形的基準點
<style>
div{
width:200px;
height:200px;
display:inline-block;
}
div#a{
background-color:pink;
}
div#b{
background-color:green;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
指定變形的基準點：transform-origin屬性
指定transform-origin屬性值的時候，採取“”基準點在元素水平向上的位置，基準點在元素垂直向上的位置“的方法，其中”基準點在元素水平方向上的位置“
中可以指定的值為left，center，right,"基準點在元素垂直方向上的位置”中可以指定的值為top ， center, bottom.
<style>
div{
width:200px;
height:200px;
display:inline-block;
}
div#a{
background-color:pink;
}
div#b{
background-color:green;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
/*修改變形基準點 屬性值transform-origin*/
-webkit-transform-origin:left bottom;
-moz-transform-origin:left bottom;
-o-transform-origin:left bottom;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
<style>
div{
/*transition:property duration timing-function
其中property表示對哪個屬性進行平滑過渡，duration表示在多長時間內完成屬性值
的平滑過渡，timing-function表示通過什麼方法來進行平滑過渡。*/
background-color:#ffff00;
-webkit-transition:background-color 1s linear;
-moz-transition:background-color 1s linear;
-o-transition:background-color 1s linear;
}
div:hover{
background-color:#00ffff;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
如下顯示是：滑鼠沒有放在div元素的顯示結果。
如下顯示是:通過hover屬性指定當滑鼠指定停留在div元素上時的背景色為淺藍色
<style>
div{
background-color:#ffff00;
color:#000000;
width:300px;
-webkit-transition:background-color 1s linear,color 1s linear,width 1s linear;
-moz-transition:background-color 1s linear,color 1s linear,width 1s linear;
-o-transition:background-color 1s linear,color 1s linear,width 1s linear;
}
div:hover{
background-color:#003366;
color:#ffffff;
width:400px;
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
當滑鼠指標沒有停留在div元素上時，頁面顯示如下：
當滑鼠指正停留在div元素上，該div元素的幾個屬性的屬性值處於變化狀態時的頁面如圖：
