[TOC] ## 鼠标样式 cursor >[info] cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。 <table class="dataintable"> <tbody> <tr> <th> 值 </th> <th> 描述 </th> </tr> <tr> <td> <i> <code class=" language-php">url</code> </i> </td> <td> <p> 需使用的自定义光标的 URL。 </p> <p> 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 </p> </td> </tr> <tr> <td> <code class=" language-php"><span class="token keyword">default</span></code> </td> <td> 默认光标（通常是一个箭头） </td> </tr> <tr> <td> <code class=" language-php">auto</code> </td> <td> 默认。浏览器设置的光标。 </td> </tr> <tr> <td> <code class=" language-php">crosshair</code> </td> <td> 光标呈现为十字线。 </td> </tr> <tr> <td> <code class=" language-php">pointer</code> </td> <td> 光标呈现为指示链接的指针（一只手） </td> </tr> <tr> <td> <code class=" language-php">move</code> </td> <td> 此光标指示某对象可被移动。 </td> </tr> <tr> <td> <code class=" language-php">e-resize</code> </td> <td> 此光标指示矩形框的边缘可被向右（东）移动。 </td> </tr> <tr> <td> <code class=" language-php">ne-resize</code> </td> <td> 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 </td> </tr> <tr> <td> <code class=" language-php">nw-resize</code> </td> <td> 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 </td> </tr> <tr> <td> <code class=" language-php">n-resize</code> </td> <td> 此光标指示矩形框的边缘可被向上（北）移动。 </td> </tr> <tr> <td> <code class=" language-php">se-resize</code> </td> <td> 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 </td> </tr> <tr> <td> <code class=" language-php">sw-resize</code> </td> <td> 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 </td> </tr> <tr> <td> <code class=" language-php">s-resize</code> </td> <td> 此光标指示矩形框的边缘可被向下移动（南）。 </td> </tr> <tr> <td> <code class=" language-php">w-resize</code> </td> <td> 此光标指示矩形框的边缘可被向左移动（西）。 </td> </tr> <tr> <td> <code class=" language-php">text</code> </td> <td> 此光标指示文本。 </td> </tr> <tr> <td> <code class=" language-php">wait</code> </td> <td> 此光标指示程序正忙（通常是一只表或沙漏）。 </td> </tr> <tr> <td> <code class=" language-php">help</code> </td> <td> 此光标指示可用的帮助（通常是一个问号或一个气球）。 </td> </tr> </tbody> </table> ## 透明度 >[info]设置 div 元素的不透明级别： ~~~ div{ opacity:0.5; } ~~~ >[danger]注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。 ## 取消li标签默认圆点 浏览器会默认给li标签前面加一个黑圆点样式，这种默认的样式对现在的开发者来说已经没有太大的用处了一般我们会取消掉这个默认的样式，方法如下： ~~~ list-style：none; ~~~ ## 圆角 >[info]border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 ~~~ <style> #border{ width:100px; height:100px; background-color:#ff9900; border-radius:10%; /*单位像素(10px)*/ } </style> <div id="border"></div> ~~~ <div id="border" style="width:100px; height:100px; background-color:#ff9900; border-radius:10%;"></div> ## 阴影(box-shadow) >[info]box-shadow 属性向框添加一个或多个阴影。 ~~~ <style> #box{ width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; } </style> <div id="box"></div> ~~~ <div id="box" style="width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888;"></div> * * * * * ## CSS画三角形 >[info]通过框架属性可以做出三角形。 ~~~ <style type="text/css"> .up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } </style> <div class="up"></div> ~~~ <div class="up" style='width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #ff9900 ;'></div> * * * * * >[danger]**作业：**把以上几种属性都练习熟练。