用CSS3实现图像风格.docVIP

用CSS3实现图像风格 分类： 前端 2011-12-03 21:28 515人阅读 评论(0) 收藏 举报 ? ? ? ? 译自：/tutorials/css3-image-styles ? ? ? ??转载请标明出处：蒋宇捷的博客(/hfahe)? ? ? ? ? - - - - - - 当在图像元素上直接使用CSS3内阴影或者圆角边框时，浏览器对于CSS样式的渲染并不完美。但是，如果图像作为背景图像使用时，你可以为它添加任何样式，而且可以实现完美的渲染。Darcy Clarke和我一起编写了一个如何使用jQuery来动态创建完美圆角边框的快速教程。今天我要重启这个话题，向你展示使用CSS的背景图像技巧我们还可以做多少事情。我将向你展示如何使用盒阴影、圆角边框和转换来创建不同的图像样式。 查看演示 问题（见演示） 查看演示，你会发现第一排的图像应用了圆角边框和内阴影。Firefox在图片元素上支持圆角边框，但是不支持内阴影的渲染。Chrome和Safari完全不支持圆角边框和内阴影的渲染。 解决方案 要使用圆角边框和内阴影，解决方案是把所需的图像设置为背景图像。 动态的方式 要采用动态的方式实现，你可以使用jQuery来将每一个图像元素动态的包装为背景图像。如下的jQuery代码使用span标签来包装所有的图像，并且将图像应用为背景图像（jQuery代码来自Darcy Clarke）。 view plaincopy to clipboardprint? script?type=text/javascript?src=/ajax/libs/jquery/1.5/jquery.min.js/script?? script?type=text/javascript?? $(document).ready(function(){?? ?? ??$(img).load(function()?{?? ????$(this).wrap(function(){?? ??????return?span?class=image-wrap??+?$(this).attr(class)?+??style=position:relative;?display:inline-block;?background:url(?+?$(this).attr(src)?+?)?no-repeat?center?center;?width:??+?$(this).width()?+?px;?height:??+?$(this).height()?+?px;?/;?? ????});?? ????$(this).css(opacity,0);?? ??});?? ?? });?? /script?? 输出 上面的代码将输入如下的HTML代码： view plaincopy to clipboardprint? span?class=image-wrap??style=position:relative;?display:inline-block;?background:url(image.jpg)?no-repeat?center?center;?width:?150px;?height:?150px;?? ????img?src=image.jpg?style=opacity:?0;?? /span?? 圆形图像（见演示） 现在图片已经被应用为背景图像，你几乎可以为它添加任何样式。如下是一个用圆角边框创建的简单圆形图像。如果你还不熟悉CSS3，请阅读我对CSS3的基础教程。 ? CSS view plaincopy to clipboardprint? .circle?.image-wrap?{?? ????-webkit-border-radius:?50em;?? ????-moz-border-radius:?50em;?? ????border-radius:?50em;?? }?? 卡片风格（见演示） 如下是一个用多内阴影值创建的卡片图像样式。 CSS view plaincopy to clipboardprint? .card?.image-wrap?{?? ????-webkit-box-shadow:?inset?0?0?1px?rgba(0,0,0,.8),?inset?0?2px?0?rgba(255,255,255,.5),?inset?0?-1px?0?rgba(0,0,0,.4);?? ????-moz-box-shadow:?inset?0?0?1px?rgba(0,0,0,.8),?inset?0?2px?0?rgba(255,255,255,.5),?inset?0?-1px?0?rgba(0,0,0,.4);