zoukankan      html  css  js  c++  java
  • HTML CSS边框阴影的实现

    一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器。

    <!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">
    <head>
    <title>CSS边框阴影</title>
    <style>
    .dropshadow2{
        float:left;
        clear:left;
        background: url(/jscss/demoimg/200903/shadowAlpha.png) no-repeat bottom right !important;
        background: url(/jscss/demoimg/200903/shadow.gif) no-repeat bottom right;
        margin: 10px 0 10px 10px !important;
        margin: 10px 0 10px 5px;
        width: 360px;
        padding: 0px;
    }
    .innerbox{
        position:relative;
        bottom:6px;
        right: 6px;
        border: 1px solid #999999;
        padding:4px;
        margin: 0px 0px 0px 0px;
    }
    .innerbox{
        /* IE5 hack */
        margin: 0px 0px -3px 0px;
        margin:  0px 0px 0px 0px;
    }
    .innerbox p{        
        font-size:14px;
        margin: 3px;
    }
    </style>
    </head>
    <body>
    <div class="dropshadow2"><div class="innerbox"><h4>CSS阴影:</h4>  <p>这段边框阴影效果怎么样呢?</p></div></div>
    </body>
    </html>

    效果图

    需要两张图片

  • 相关阅读:
    SpringBoot整合RabbitMq
    SpringBoot整合Mybatis
    Docker操作
    mysql高级复习
    mysql复习2
    springcloud复习2
    mysql复习1
    springcloud复习1
    JDBC(7)—DAO
    mysql报错:1130 -host 'localhost' is not allowed to connect to this mysql server
  • 原文地址:https://www.cnblogs.com/taoweiji/p/3279419.html
Copyright © 2011-2022 走看看