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
  • 相关阅读:
    使用MAVEN打JAR,直接使用
    回溯法最优装载问题(java)
    js-object引用示例
    网页自适应布局方案
    ajax的工作原理
    通过SublimeCodeIntel设置JavaScript自动补全
    sublime的Package Control的安装及使用
    Opencv 简单视频播放器
    OpenCV_复制一个或多个ROI图像区域
    OpenCV 2.4.8 or OpenCV 2.4.9组件结构全解析
  • 原文地址:https://www.cnblogs.com/webdm/p/2130643.html
Copyright © 2011-2022 走看看