滑鼠變換
想不想在首頁上實現這樣的效果呢？滑鼠移到“網站協助”等字樣上時，形狀就變成求助的樣子，當移到可能需要較長時間等待的超連結時，滑鼠形狀就變成等待的樣子。你要是不信的話，就先將下面這段代碼拷到一個文字編輯器中，存成網頁檔案，然後我再給你解釋代碼的含義。
| 代碼如下 | 複製代碼 |
| <html> <head> <title>cursor</title> </head> <body> <p style=cursor:hand>手形</p> <p style=cursor:move>移動標誌</p> <p style=cursor:wait>等待狀態</p> <p style=cursor:crosshair>定位指示</p> <p style=cursor:help>尋求協助</p> </body> </html> |
|
這段代碼很簡單，只用到了CSS中的“cursor”屬性，利用“style=cursor:值”這樣的語句形式分別設定它的值就可以了。例如：值為“hand”時，當滑鼠移到相應的文字或圖片上時，就會變成超連結的手形；值為“move”時，當滑鼠移到相應的文字或圖片上時，就會變成上下左右帶方向箭頭的形狀，滑鼠的其他形狀及“cursor”值。
陰影製作效果
這個帶陰影的文字，它不是插入的圖形，而是用“層疊式樣式表單——CSS”用幾行代碼寫出來的，這比插入圖片可省空間多了。這個頁面的原始碼是這樣的：
| 代碼如下 | 複製代碼 |
| <html> <head> <title>shadow</title> <style type=text/css> <!-- p {position:absolute; top:130; left:50; filter:DropShadow(Color=pink,OffX=4,OffY=4,positive=1);} --> </style> </head> <body> <p style=font-size:48;font-weight:bold;color:red;>陰影製作效果</p> </body> </html> |
|
這個效果用到了CSS濾鏡中的“DropShadow”屬性，代碼是：{ filter:DropShadow(Color=pink,OffX=4,OffY=4,positive=1)}，其中，“color”參數表示的是陰影的顏色，“OffX”和“OffY”表示的是陰影在X方向和Y方向上的位移量，“positive”參數可以取值為“0”或“1”，取值為“0”時，表示為透明像素設定陰影，為“1”時，表示為不透明像素設定陰影。
使用“DropShadow”屬性時，要特別注意的是，“position”屬性的值一定要是“absolute”，否則陰影不能判斷位移的方向。為圖形添加陰影的代碼與為文字設定陰影的代碼完全相同。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
