zoukankan      html  css  js  c++  java
  • CSS实现自适应的图片背景边框代码

    代码简介:

    CSS漂亮的图片边框,边框是用背景图片修饰的,不过可以自适应大小,这点挺实用的,不论你的图片有多大,它始终显示在图片的外围,不会错位,这当然还要归功于CSS的功劳。

    代码内容:

    View Code
    <html>
    <head>
    <title>CSS实现自适应的图片背景边框代码_网页代码站(www.webdm.cn)</title>
    <style type=
    "text/css">
    body{
    text-
    align:center;
    margin-top:100px;
    }
    .
    in{
    border:1px solid #666;
    padding:4px;
    }
    .
    out{
    float:left;
    background:url("http://www.webdm.cn/images/20090930/tr.gif") no-repeat right top;

    }
    .mir{
    background:url("http://www.webdm.cn/images/20090930/rb.gif") no-repeat right bottom;
    padding:10px;
    padding-bottom:0;
    padding-left:0;
    }
    .mil{
    background:url("http://www.webdm.cn/images/20090930/l.gif") no-repeat left top;
    }
    </style>
    </head>
    <body>
    <
    div class='out'>
    <
    div class='mil'>
    <
    div class='mir'>
    <
    div class='in'>
    <img src=
    'http://www.webdm.cn/images/20090930/1.jpg' />
    </
    div>
    </
    div>
    </
    div>
    </
    div>
    <
    div class='out'>
    <
    div class='mil'>
    <
    div class='mir'>
    <
    div class='in'>
    <img src=
    'http://www.webdm.cn/images/20090930/11.jpg' />
    </
    div>
    </
    div>
    </
    div>
    </
    div>
    </body>
    </html>
    <br />
    <p><a href=
    "http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    代码来自:
    http://www.webdm.cn/webcode/85af318f-1215-4549-b980-48587d04b862.html
  • 相关阅读:
    HTTP客户端识别与Cookie机制
    javascript模式之模块模式
    js类式继承模式学习心得
    关于html自闭合标签要不要加空格和斜杠的问题?
    分享两件有趣的事情
    PS Web切图界面设置
    这是什么
    关于前后端分离我的理解
    模块化方案esl以及amd的依赖方式
    node 内存管理相关
  • 原文地址:https://www.cnblogs.com/webdm/p/2130643.html
Copyright © 2011-2022 走看看