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
  • 相关阅读:
    需要union
    with语法,需要递归的面试题目
    聚合主分类,子查询获得子分类
    泛型
    RepeaterInMVC
    需要自己创建集合的题目
    Ollydbg入门
    svn服务器架设
    http与svn架设服务器
    svn错误信息一览表
  • 原文地址:https://www.cnblogs.com/webdm/p/2130643.html
Copyright © 2011-2022 走看看