zoukankan      html  css  js  c++  java
  • 将图片四角变为圆角的CSS代码

    代码简介:

    最近见到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>
    <!--[if lt IE 7]>
    <style type="text/css">
    .photo span { behavior: url(iepngfix.htc);}
    </style>
    <![endif]
    -->
    </head>

    <body>
    <div class="photo">
        
    <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><href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    代码来自:http://www.webdm.cn/webcode/1201899c-5c6a-49e0-b17f-0626f3d17c15.html
  • 相关阅读:
    HTML标签
    Web标准
    Web服务器 (获取域名)
    网站favicon.ico 图标
    模块化
    外边距
    h5css产品模块设计
    用策略模式(自定义注解+包扫描)解决if else 太多的问题
    方法区 永久代 元空间 常量池
    javac jar java
  • 原文地址:https://www.cnblogs.com/webdm/p/2150256.html
Copyright © 2011-2022 走看看