zoukankan      html  css  js  c++  java
  • 投影

    使用css可以给投影效果很大的灵活性。

    简单的css投影:

    原理是将一个大的背景图像应用于容器div的背景,然后使用负边距偏移这个图像,从而显示出投影。

            <style>
                .img-wrapper{
                    background: url(img/shadow.gif) no-repeat bottom right;
                    clear: right;
                    float: left;    //因为div是块级元素,背景的投影图会水平伸展,占据所有空间,而我们需要div包围图像,可以显示的设置div的宽度,但这样会限制这种技术的用途
                      //可以浮动div,让它收缩包围的效果。ie5.x不支持,可以对ie5隐藏样式。
                    position: relative; //为了兼容ie6
                }
                .img-wrapper img{
                    margin: 5px 5px 0px -5px;
                    background: #fff;
                    border: 1px solid #a9a9a9;
                    padding: 4px;
                    display: block;        //这两个属性为了兼容ie6
                    position: relative;    //同上
                }
            </style>
        </head>
        <body>
            <div class="img-wrapper">
                <img src="img/dunstan.jpg" width="300px" height="300px" />
            </div>
        </body>

    来自Clagnut的投影方法:

    不使用外边距,使用相对定位来偏移图像。

                .img-wrapper{
                    background: url(img/shadow.gif) no-repeat bottom right;
                    float: left;
                    line-height: 0;
                }
                .img-wrapper img{
                    background: #fff;
                    border: 1px solid #a9a9a9;
                    padding: 4px;
                    position: relative;
                    left: -5px;
                    top: -5px;
                }

    box-shadow:需要四个值,垂直水平偏移,投影的宽度,颜色

                .img-wrapper{
                    -webkit-box-shadow: 3px 3px 6px #666;
                    -moz-box-shadow:3px 3px 6px #666;
                    box-shadow: 3px 3px 6px #666;
                }

                .img-wrapper{
                    background: url(img/shadow.gif) no-repeat bottom right;
                    float: left;
                    line-height: 0;
                }
                .img-wrapper img{
                    background: #fff;
                    border: 1px solid #a9a9a9;
                    padding: 4px;
                    position: relative;
                    left: -5px;
                    top: -5px;
                }

  • 相关阅读:
    【HTML】添加网页背景音乐
    无线安全之破解WPA/WPA2 加密WiFi
    基于deepin-wine的windows软件打包deb安装包教程
    deepin V20 启用Nvidia驱动方法
    [Liunx]Linux安装screenfetch
    开往-友链接力
    linux常用命令(六)提权和文件上传下载的操作
    抓住会员!奇点云DataNuza重大发布
    喜讯 | 奇点云入选「GMIC 2020 PRO 十佳新生代」榜单
    数据智能应用最终实现企业降本增效
  • 原文地址:https://www.cnblogs.com/by-dxm/p/6118446.html
Copyright © 2011-2022 走看看