CSS3美化图片
有关于美化图片的教程，W3cplus有好几篇了，比如说《 CSS3制作图片样式 》、《 jQuery和CSS3给图片制作圆角 》这两篇是针对于美化图片圆角效果的教程，昨天在《 CSS美化图片 》一文中介了使用标签给图片设置朦板效果。 《 CSS美化图片 》制作原理是通过给元素添加一个额外的标签，比如说“span”标签，或者能过jQuery的append函数给元素添加标签，在把将此标签运用朦板背景图片定位在图片元素之上，达到美化图片的效果。今天要和大家分享一种新的方法，基于《 CSS美化图片 》介绍的理论之上，把里面的“span”标签去掉，同时使用CSS3中的伪元素“::before”和“::after”或者CSS3的伪类选择器“:before”和“:after”来代替增加的标签“span”，接着将运用在span上的样式转架嫁到伪元素或者伪类选择器上。下面我们一起来学习一下这种制作方法与CSS方法有何不一样？ DEMO DOWNLOAD HTML结构的变化 首先来简单的回忆一下《 CSS美化图片 》介绍的结构，如图所示： 那么今天要介绍的方法，关键之处是不需要这个额外增加的“span”标准，此时结构就改成了： <div class="photo"> <a href=""> <img src="xxx.jpg" alt="" /> </a> </div> “span”标签去掉了