指定自动换行的处理方法
<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元素的几个属性的属性值处于变化状态时的页面如图：
