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;
    }/*内框移位,外框的背景色就成了阴影*/
    应用在图片上

  • 相关阅读:
    Android使用LocalSocket抓取数据
    求一个数组的最长递减子序列 比如{9,4,3,2,5,4,3,2}的最长递减子序列为{9,5,4,3,2}
    链表A和B的有序合并,合并过程不产生新的节点,合并后B消失
    Android中intent如何传递自定义数据类型
    字符串的排列组合问题
    android.net.LocalSocket
    [转]OWC生成柱图,线图,饼图
    利用C#对远程服务进行操作
    域备份&域还原
    ActiveReports for .NET 简单使用
  • 原文地址:https://www.cnblogs.com/goody9807/p/1217440.html
Copyright © 2011-2022 走看看