将图片四角变为圆角的CSS代码

最新推荐文章于 2024-08-29 09:00:00 发布

weixin_33714884

最新推荐文章于 2024-08-29 09:00:00 发布

阅读量908

点赞数

文章标签： c/c++ xhtml

原文链接：http://www.cnblogs.com/webdm/archive/2011/08/23/2150256.html

版权

代码简介：

最近见到Facebook网站的图片圆角很特别，将一张方角的图片经过CSS定义后自动变成了圆角，后来研究了一番，发觉是用CSS控制一个圆角背景图片叠加而成，值得学习，不过因为是Facebook的资源图片，你在变动图片大小的时候最好将背景图片也变大。　　注意，本效果在IE7以下版本浏览器有问题。

代码内容：

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head >
< title > 将图片四角变为圆角的CSS代码 - www.webdm.cn </ title >
< style type ="text/css" >
body { margin : 30px ; padding : 0 ; font-size : 12px ; text-align : center }
div { float : left ; line-height : 25px ; color : red }
.photo { position : relative ; width : 50px ; height : 50px ; float : left ; margin : 0 50px ; }
.photo span { width : 50px ; height : 50px ; display : block ; position : absolute ; top : 0 ; left : 0 ; background : url(http://www.webdm.cn/images/20091005/head_bg.png) no-repeat ; }
.photo img { border : none ; padding : 0 ; }
</ style >

</ head >

< body >
< div class ="photo" >
< a href ="#" >< span ></ span >< img src ="http://www.webdm.cn/images/wall3_s.jpg" alt ="image" width ="50" height ="50" /></ a > 圆角头像
</ div >
< div >< img src ="http://www.webdm.cn/images/wall3_s.jpg" alt ="image" />< br /> 实际头像 </ div >
</ body >
< br />
< p >< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/1201899c-5c6a-49e0-b17f-0626f3d17c15.html

转载于:https://www.cnblogs.com/webdm/archive/2011/08/23/2150256.html