zoukankan      html  css  js  c++  java
  • 仿百度自适应宽度的圆角

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>仿百度宽度自适应的圆角</title>
    <head>
    <style type="text/css">
    .conternt{
    position:relative;
    300px;
    height:200px;
    background:#DBEDF5;
    border:#9BC9DF 1px solid;
    }
    .conternt p{margin:10px}
    .lt,.ld,.rt,.rd{
    position:absolute;
    3px;
    height:3px;
    overflow:hidden;
    }
    .lt{
    left:-1px;
    top:-1px;
    background: url(/jscss/demoimg/200906/3x7.gif) 0 0 no-repeat;
    }
    .ld{
    left:-1px;
    bottom:-1px;
    background:url(/jscss/demoimg/200906/3x7.gif) 0 -7px no-repeat;
    }
    .rt{
    right:-1px;
    top:-1px;
    background:url(/jscss/demoimg/200906/3x7.gif) -11px 0 no-repeat;
    }
    .rd{
    right:-1px;
    bottom:-1px;
    background:url(/jscss/demoimg/200906/3x7.gif) -11px -7px no-repeat;
    }
    </style>
    </head>
    <body>
    <div class="conternt">
    <div class="lt"></div>
    <div class="ld"></div>
    <p>宽度和高度都可以自适应,你可以把这里的文字加多一点</p>
    <div class="rt"></div>
    <div class="rd"></div>
    </div>
    </body>
    </html>

  • 相关阅读:
    jquery-scrollstop
    Grunt usemin
    HTML5 之文件操作(file)
    启动mongodb bat
    判断是否支持WebP
    前端攻略系列(一)
    impress.js初体验
    JS应用实例3:定时弹出广告
    JS应用实例2:轮播图
    JS应用实例1:注册页面表单校验
  • 原文地址:https://www.cnblogs.com/hgj123/p/3658244.html
Copyright © 2011-2022 走看看