話說放大，這是乙個再容易不過的效果了。當然，今天說的可不是簡簡單單的在乙個框裡放大，而是乙個圓。就像放大鏡或是狙擊鏡那樣，只有圓圈裡的放大，圈外的當然還是原來的。這是不是很不可思議？ 當然不是。做過flash的也許會脫口而出：套個蒙版就是了。可惜css不是flash，沒有那一套。我們只有從css裡面慢慢挖掘。
的縮放可以通過img元素的拉伸來實現。接著蓋上一張透明畫素畫的實心圓，因此正好只顯示出放大後中心圓圈部分。但第3步可就不對了，雖然之前加蓋了一張透明圓形的gif，螢幕上確實出現了乙個放大過的圓形，但圓圈的外面卻變成加蓋的背景色了，因為這張是在最上層了。到此你或許在想給其中某些元素加些透明度什麼的，事實上無論給哪個層加透明度都是徒勞的。因為此時無非就兩種情況：圓圈外被背景色覆蓋；背景色透明的話就是乙個矩形的放大，而不是圓形。我們所希望的是：蒙版的背景色透明，並且在此位置下面的放大圖也跟著透明。
對於ie來說，這並非難事，因為ie有濾鏡。如果你熟悉的話應該早就想到了chroma濾鏡，這是乙個很重要的濾鏡，因為他能把乙個層裡的指定顏色變成透明色！這不正是我們期待嗎。我們新建乙個層，層裡面分別疊上放大(後)和蒙版(前)，就是為了讓他們合併到這個新建層裡。我們給這個新建層設定chroma濾鏡，因為他們的子層都在此合併畫素了，所以圓圈外那部分背景色透明後，取而代之的就是原。這就是我們最終想要的效果。
值得注意的是，chroma濾鏡在給指定的蒙版背景色透明的時候，圓圈裡同樣的顏色也會一起透明掉，所以要給蒙版設定乙個非常少見的背景色，盡可能減少圓圈裡的透明畫素點。
ie上面的解決方案還算簡單，非ie的呢？你當然會說canvas，因為圖形方面他是萬能的。如果css上確實找不到辦法，我們也只能用canvas。不過可別忘了那些非ie的主流瀏覽器幾乎都是支援css3的。css3雖然沒有像chroma濾鏡那樣的效果，但是對於本例這樣的效果還是綽綽有餘的：因為我們只想要乙個放大了的圓形，而css3天生就支援畫圓。
css3支援層的圓角，例如border-radius:5px，就能給層的4個方角變為半徑5px的圓角。我們不妨將其運用到極限，給乙個100*100的層設定乙個border-radius:50px圓角，這時可就是乙個圓滾滾的層了！層裡面的內容當然不會限制在圓角裡面，但層的背景會。並且css3是支援背景縮放的，本例到此也就迎刃而解了。
前面關鍵的問題都以解決，下面就實現乙個狙擊瞄準器的效果，並支援滾輪縮放。為了使**更清晰，本例分別為ie，ff及其他瀏覽器做了3個版本，通過demo頁面能夠自動轉跳。
demo:
支援所有主流瀏覽器（ie8有個絕對定位的bug，所以需要ie7的相容模式）
外掛程式使用非常簡單，在需要放大的上設定bigsrc屬性即可，bigsrc就是清晰大圖（當然需要和原圖保持同樣的尺寸比例）。
外掛程式需要的檔案：
magnifier-min.js
mask.png
pic.png
blank.ico
儲存在一起即可。 （2012/2/3）
乙個移入遮罩層消失的放大鏡
具體的實現效果如上圖，即滑鼠移入時遮罩層消失 實現原理 背景圖和遮罩層不進行任何操作，保持最初狀態就好，然後給移動的小方塊加和大的背景圖一樣的背景圖，移動小方塊的同時通過background position移動小方塊背景圖的位置來實現 老規矩，直接上 感興趣的同學可以拉下去自己看看 滑鼠移入事件 ...
乙個簡單的CSS圓形縮放動畫
網易新聞的分享按鈕hover效果 新聞頁面 看了一下這兩個頁面的原始碼，主要是用了transform scale 和transition，自己的最終的實現效果如下 實現思路大體是模仿網易新聞的，布局如下 class third party third party weixin 複製 外層的a標籤用於...
css 底部劃線 分享乙個非常實用的css小技巧
在設計頁面時，我們經常會遇到類似這樣的頁面布局 圖中乙個容器內有多個內容塊，每塊都有乙個底部的下劃線，但是一般為了美觀，最後乙個內容塊兒的下劃線是要去掉的 接下來我們看看通常情況下，是如何處理這種樣式的 上述 中，假設我們不知道一共要往容器中新增多少個子元素，所以只能每次新增時都判斷一下是否為最後乙...