《
用CSS制作一个圆形放大镜》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344222013.htm
,用CSS创建一个布局居中的页面; 话说图片放大，这是一个再轻易不过的效果了。当然，今天说的可不是简简单单的在一个框里放大，而是一个圆。就像放大镜或是狙击镜那样，只有圆圈里的放大，圈外确当然还是本来的图片。这是不是很不堪设想？ 当然不是。做过Flash的兴许会脱口而出：套个蒙版就是了。惋惜CSS不是Flash，没有那一套。我们只有从CSS里面缓缓发掘。
--> [
网站建设之]用CSS制造一个圆形放大镜
CSS3支持层的圆角，例如border-radius:5px，就能给层的4个方角变为半径5px的圆角。我们不妨将其应用到极限，给一个100*100的层设置一个border-radius:50px圆角，这时可就是一个圆滚滚的层了！层里面的内容当然不会限度在圆角里面，但层的背景图片会。并且CSS3是支持背景图片缩放的，本例到此也就迎刃而解了。
图片的缩放能够通过img元素的拉伸来实现。接着盖上一张透明像素画的实心圆，因而正好只显示出放大后核心圆圈局部。但第3步可就错误了，固然之前加盖了一张透明圆形的gif图片，屏幕上确切呈现了一个放大过的圆形图片，但圆圈的外面却变成加盖图片的背风景了，因为这张图片是在最上层了。到此你或者在想给其中某些元素加些透明度什么的，事实上无论给哪个层加透明度都是徒劳的。由于此时无非就两种情形：圆圈外被背景色笼罩；背景色透明的话就是一个矩形的放大，而不是圆形。咱们所盼望的是：蒙版的背景色透明，并且在此地位下面的放大图也随着透明。
IE上面的解决计划还算简略，非IE的呢？你当然会说canvas，因为图形方面他是万能的。假如CSS上确实找不到措施，我们也只能用canvas。不外可别忘了那些非IE的主流阅读器简直都是支持CSS3的。CSS3虽然不像Chroma滤镜那样的后果，然而对本例这样的效果仍是绰绰有余的：因为我们只想要一个放大了的圆形图片，而CSS3生成就支撑画圆。
,用cssText属性批量操作样式技巧;
Tag： CSS ,
用CSS3实现根据文件类型显示不同图标; 圆形 放大镜 CSS ,
用CSS3伪类target如何制作tab选项卡效果; 圆形 放大镜
对于IE来说，这并责难事，因为IE有滤镜。如果你熟习的话应当早就想到了Chroma滤镜，这是一个很主要的滤镜，因为他能把一个层里的指定颜色变成透明色！这不恰是我们等待吗。我们新建一个层，层里面分辨叠上放大图片(后)跟蒙幅员片(前)，就是为了让他们合并到这个新建层里。我们给这个新建层设置Chroma滤镜，因为他们的子层都在此合并像素了，所以圆圈外那部门背景色透明后，取而代之的就是原图片。这就是我们终极想要的效果。
先说IE，因为IE有滤镜，可以实现很多意想不到的功效。先来收拾下我们的目的：
1.放大一副图片
,用CSS Sprites加快网页加载速度; 2.只显示其中的一个圆
3.圆外是透明的
值得留神的是，Chroma滤镜在给指定的蒙版背景色透明的时候，圆圈里同样的色彩也会一起透明掉，所以要给蒙版设置一个十分少见的背景色，尽可能减少圆圈里的透明像素点。
前面要害的问题都以解决，下面就实现一个狙击瞄准器的效果，并支持滚轮缩放。为了使代码更清楚，本例分离为IE，FF及其余浏览器做了3个版本，通过Demo页面可能主动转跳。
(责任编辑：网站建设)
用CSS制作一个圆形放大镜相关文章