zoukankan      html  css  js  c++  java
  • 简单易变的CSS阴影效果

    厌倦了在图片处理软件上给每张图片加上边框修饰?让CSS帮你一把吧!嘿嘿,看看下面的几张效果图,边框都不是用图片做的,很方便吧?

    文字块的应用效果

    NARROW

    This is the text that goes in the middle.

    MEDIUM

    Another box that has a bit more text so that the box will be taller and the shadow stretches to suit.

    WIDE

    One more text box that has a lot more text so that the box will be even taller and the shadow will still shadow to suit. The shadow color can be matched to the background and can also be positioned to the left or right.


     

    内阴影

    MEDIUM

    and finally a text box with a surround shadow.

    代码解析

    HTML部分

    lt;div class="out narrow">
    <div class="in ltin tpin">
    <h2>NARROW</h2>
    <p>This is the text that goes in the middle.</p>
    </div>
    </div>
    <!--以上只是第一个文字块的HTML代码,但原理和其他几个都类似, 里面的class值有空格,如后者与前者的样式有不一的就用后者的样式-->

    css代码部分

        .out {
    display:block;
    background:#bbb;
    border:1px solid #ddd;
    position:relative;
    margin:1em 0;
    }/*设置外框(背景、边框与定位)*/
    .in2 {
    display:block;
    background:#777;
    border:1px solid #999;
    position:relative;
    padding:1px;
    margin:1px;
    }
    .in {
    text-align:center;
    background:#fff;
    border:1px solid #555;
    position:relative;
    padding:5px;
    font-weight:normal;
    }/*内框的设定*/
        .ltin {
    left:-5px;
    }
    .tpin {
    top:-5px;
    }
    .rtin {
    left:5px;
    }/*内框移位,外框的背景色就成了阴影*/
    应用在图片上

  • 相关阅读:
    SQL 按月分组查询,统计,耗时,精确到天
    SQLf分组查询,百分比
    基于rstful风格的 java controller代码
    mysql 建表心得
    使用上下文获取java接口实例,对象等
    java 对word添加水印 (aspose .jar)
    Web前端性能优化进阶——完结篇
    JS简易拖拽效果
    点九是andriod平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png
    js提示后跳转代码集合
  • 原文地址:https://www.cnblogs.com/goody9807/p/1217440.html
Copyright © 2011-2022 走看看