CSS補充 · 學并思Web應用程序

[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]**作業：**把以上幾種屬性都練習熟練。