我是要成为后宫佳丽三千的男人啊~
用户界面样式
outline 复合属性（outline-width、outline-style、outline-color），设置对象外的线条轮廓。outline画在border外面。
使用频率一般，在H5中不建议使用。
语法与border的使用类似。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>outline设置对象外的线条轮廓</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:5px dashed red; 10 outline:10px solid green; 11 width:100px; 12 height:100px; 13 text-align:center; 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 20 </div> 21 </body> 22 </html>
运行结果：
cursor 设置在对象上移动的鼠标指针采用何种系统预定义的光标形状。
使用频率常用。
语法：cursor：[<url>（使用自定义的图像作为光标类型，IE和Opera只支持.cur图片格式，火狐、谷歌和Safari也支持常见的图片格式） [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]
游戏中使用自定义图片做鼠标指针的情况较为常见，一般网站只是用系统预定义的。
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>CursorDemo设置鼠标光标的形状（如手型或箭头）</title> 6 <meta charset="utf-8" /> 7 8 </head> 9 <body> 10 <ul> 11 <li> 12 <h3>cursor：default默认箭头型</h3> 13 <input type="button" value="箭头" style="cursor:default" /> 14 </li> 15 <li> 16 <h3>cursor：pointer手型</h3> 17 <input type="button" value="手型" style="cursor:pointer" /> 18 </li> 19 <li> 20 <h3>cursor：text文本光标</h3> 21 <input type="button" value="文本光标" style="cursor:text" /> 22 </li> 23 </ul> 24 </body> 25 </html>
运行结果：
zoom 设置对象缩放比例。
语法：zoom：normal（正常显示） | <number>（制定一个值，不允许负值） | <percentage>（百分比设置）
示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>Zoom缩放比例</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body style="margin:50px;"> 9 <ul> 10 <li style="zoom:normal"> 11 zoom:normal缩放正常 12 </li> 13 <li style="zoom:3"> 14 zoom:3 15 </li> 16 <li style="zoom:300%"> 17 zoom:300% 18 </li> 19 <li style="zoom:100%"> 20 zoom:100% 21 </li> 22 <li style="zoom:500%"> 23 zoom:500% 24 </li> 25 </ul> 26 </body> 27 </html>
运行结果：
