zoukankan      html  css  js  c++  java
  • css添加阴影

    网页上通常都有好看的阴影效果,而这种效果是怎样实现的呢?

    以下是实例:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    img{
     margin:0px 5px 5px 0px;
     border:solid 1px #000;
    }
    body{background-color:#069;
    background-image:url(img/bg1.gif);
    background-position:bottom;
    background-repeat:repeat-x;
    background:url(img/bg2.gif) top repeat-x #069;

    }
    .div1{
     background-color:#FFF;}
    .div2{
     float:left;
    }
    .div3{
     background:url(img/yy.gif) no-repeat bottom right;
    }
    </style>
    </head>

    <body>
    <p>ksdjfsjfsjdfjsdfjsd</p>
    <p>ksdjfsjfsjdfjsdfjsd</p>
    <p>ksdjfsjfsjdfjsdfjsd</p>
    <p>ksdjfsjfsjdfjsdfjsd</p>
    <p>ksdjfsjfsjdfjsdfjsd</p>
    <p>ksdjfsjfsjdfjsdfjsd</p>
    <p>ksdjfsjfsjdfjsdfjsd</p>
    <p>ksdjfsjfsjdfjsdfjsd</p>
    <div class="div2"><div class="div3"><img src="img/E5.jpg"/></div></div>

    <div class="div1">
    <p>“齐铭把牛奶带上”,刚准备拉开门,母亲就从客厅里追出来,手上拿着一袋刚从电饭煲里蒸热的袋装牛奶,腾腾地冒着热气,“哦哟,你们男孩子要多喝牛奶晓得伐,特别是你们高一的男孩子,不喝怎么行。”说完拉开齐铭背后的书包拉链,一把塞进去。因为个子比儿子矮上一大截,所以母亲还踮了踮脚。塞完牛奶,母亲捏了捏齐铭的胳膊,又开始叨念着,“哦哟,大冬天的就穿这么一点啊,这怎么行,男孩子嘛哪能只讲究帅气的啦?”</p>

    <p>“好啦好啦,”齐铭低低应了一声,然后拉开门,“妈,我上课要迟到了。”

    拉开门,浓重的雾气朝屋里涌。头顶是深冬里飘荡着的白寥寥的天光。

    还是早上很早,光线来不及照穿整条冗长的弄堂。弄堂两边堆放着的箱子,锅,以及垃圾桶,都只能在雾气里浮出一圈浅浅的灰色轮廓来。</p>

    齐铭关上了门,连同母亲的唠叨一起关在了里面。只来得及隐约听到半句“放学后早点……”,冬天的寒气就隔绝了一切。

    齐铭提了提书包带子,哈出口白气,耸耸肩,朝弄堂口走去。

    刚走两步,看见踉跄着冲出家门的易遥,险些撞上。齐铭刚想张口问声早,就听到门里传出来的女人的尖嗓门:

    “赶赶赶,你赶着去投胎啊你,你怎么不去死!赔钱货!”

    易遥抬起头,正好对上齐铭稍稍有些尴尬的脸。易遥沉默的脸在冬天早晨微薄的光线里看不出表情。

    在齐铭的记忆里,这一个对视,像是一整个世纪般长短的慢镜。

    2

    “又和你妈吵架了?”

    “恩。”

    “怎么回事?”

    “算了别提了”,易遥揉着胳膊上的淤青,那是昨天被她妈掐的,“你知道我妈那人,就是神经病,我懒得理她。”

    “……恩。你没事吧?”

    “恩。没事。”

    深冬的清晨。整个弄堂都还是一片安静。像是被浓雾浸泡着,没有一丁点儿声响。

    今天是礼拜六,所有的大人都不用上班。附近的小孩都还小,最大的一个念小学一年级。高中的学生奉行着不成文的规定,周六一定要补课。所以,一整条弄堂里只有他们两个人不急不慢地行走着。

    齐铭突然想起什么,放下一边的肩带,把书包顺向胸前,拿出牛奶,塞到易遥手里,“给。”

    易遥吸了下鼻子,伸手接了过去。

    两个人走向光亮的弄堂口,消失在一片白茫茫的浓雾里。

    3

    该怎么去形容自己所在的世界。

    头顶是交错而过的天线,分割着不明不暗的天空。云很低很低地浮动在狭长的天空上。铅灰色的断云,沿弄堂投下深浅交替的光影。


    </div>
    </body>
    </html>
    主要是运用图片浮动,显示阴影效果;

    yy.gif是做好的黑色图片;

  • 相关阅读:
    flexbox弹性盒子布局
    LAMP环境 源码包安装
    用条件注释判断浏览器版本,解决兼容问题
    事件冒泡和事件捕获
    为js和css文件自动添加版本号
    uEditor独立图片上传
    修改netbeans模版头部的说明
    thinkphp多表关联并且分页
    thinkphp 独立分组配置
    荣耀路由HiLink一键组网如何实现?
  • 原文地址:https://www.cnblogs.com/zfang/p/2186180.html
Copyright © 2011-2022 走看看