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
  • 相关阅读:
    代码
    怎么创建scrollview
    tcp/Ip http
    游戏道具
    FPS interv
    调整音乐
    插入排序
    冒泡排序
    JSON详解
    设计模式系列(2) 工厂模式之简单工厂模式
  • 原文地址:https://www.cnblogs.com/webdm/p/2130643.html
Copyright © 2011-2022 走看看