• 使用CSS为图片添加边框的几种方法


    css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法
    阴影效果

    通过使用带有一些padding之的背景图来添加阴影效果。

    HTML
    
    <img class=”shadow” src=”sample.jpg” alt=”" />
    
    CSS
    
    img.shadow {
                background: url(shadow-1000×1000.gif) no-repeat right bottom;
                padding: 5px 10px 10px 5px;
    }

    使用CSS为图片添加边框的几种方法

    双边框效果
    这应该是目前最常见的技巧,我们通过以下方式创建说边框

    使用CSS为图片添加边框的几种方法

    HTML
    
    <img class="double-border" src="sample.jpg" alt="" />
    
    CSS
    
    img.double-border {
    
            border: 5px solid #ddd;
    
            padding: 5px;
    
            background: #fff;
    
    }

    图片外框效果

    webdesignerwall.com上有最好的讲解,这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题,可以参考这篇教程

    使用CSS为图片添加边框的几种方法

    HTML
    
    <div class="frame-block">
    
            <span>&nbsp;</span>
    
            <img src="sample.jpg" alt="" />
    
    </div>
    
    CSS
    
    .frame-block {
    
            position: relative;
    
            display: block;
    
            height:335px;
    
             575px;
    
    }
    
    .frame-block span {
    
            background: url(frame.png) no-repeat center top;
    
            height:335px;
    
             575px;
    
            display: block;
    
            position: absolute;
    
    }

    水印效果

    你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印使用CSS为图片添加边框的几种方法

    HTML
    
    <div class="transp-block">
    
            <img class="transparent" src="sample.jpg" alt="" />
    
    </div>
    
    CSS
    
    .transp-block {
    
            background: #000 url(watermark.jpg) no-repeat;
    
             575px;
    
            height: 335px;
    
    }
    
    img.transparent {
    
            filter:alpha(opacity=75);
    
            opacity:.75;
    
    }

    为图片添加说明文字

    使用绝对定位和透明度的设置来添加灵活的说明。

    使用CSS为图片添加边框的几种方法

    HTML
    
    <div class="img-desc">
    
            <img src="sample.jpg" alt="" />
    
            <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
    
    </div>
    
    CSS
    
    .img-desc {
    
            position: relative;
    
            display: block;
    
            height:335px;
    
             575px;
    
    }
    
    .img-desc cite {
    
            background: #111;
    
            filter:alpha(opacity=55);
    
            opacity:.55;
    
            color: #fff;
    
            position: absolute;
    
            bottom: 0;
    
            left: 0;
    
             555px;
    
            padding: 10px;
    
            border-top: 1px solid #999;
    
     
  • 相关阅读:
    ORA-01113: file xxxx needs media recovery
    Linux rm删除大批量文件
    SQL Server删除distribution数据库
    SQL Server 2008 R2 Service Pack 3 已经发布
    YourSQLDba开源项目发布到codeplex网站了
    ORACLE回收站机制介绍
    ORACLE临时表空间总结
    数据库服务器改名导致Reporting Service不可用的案例
    ORACLE 11g 数据库体系结构图
    ORACLE 10g 数据库体系结构图
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4513730.html
Copyright © 2020-2023  润新知