zoukankan      html  css  js  c++  java
  • 【CSS】常用特效字

    <p class="shadow">人生之路应该如何走?</p>
    <p class="shadow2">人生之路应该如何走?</p>
    <p class="shadow3">人生之路应该如何走?</p>
    <p class="shadow4">人生之路应该如何走?</p>
    <p class="shadow5">星星之火可以燎原</p>
    <p class="shadow6">文字凸起效果</p>
    <p class="shadow7">文字凹下效果</p>
    <p class="shadow8">定义描边文字</p>
    <p class="shadow9">文字外发光</p>
    .shadow {
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: #999;
        text-shadow: 0.1em 0.1em 0.1em #3c3c3c; /*阴影水平偏移值,垂直偏移值,模糊值,颜色*/
    }
    
    .shadow2 {
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: #fff;
        text-shadow: black 0.1em 0.1em 0.2em /*阴影水平偏移值,垂直偏移值,模糊值,颜色*/
    }
    
    .shadow3 {
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: #fff;
        text-shadow: 0.2em 0.5em 0.1em #600,
        -0.3em 0.1em 0.1em #060,
        0.4em -0.3em 0.1em #006; /*阴影水平偏移值,垂直偏移值,模糊值,颜色*/
    }
    
    .shadow4 {
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: red;
        border: solid 1px red;
        text-shadow: 0.5em 0.5em 0.1em #600,
        -1em 1em 0.1em #060,
        0.8em -0.8em 0.1em #006; /*阴影水平偏移值,垂直偏移值,模糊值,颜色*/
    }
    
    .shadow5 {
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: red;
        text-shadow: 0 0 4px white,
        0 -5px 4px #ff3,
        2px -10px 6px #fd3,
        -2px -15px 11px #f80,
        2px -25px 18px #f20;
    }
    
    .shadow6 {
        text-align: center;
        padding: 24px;
        margin: 0;
        font: bold 80px helvetica, Arial, sans-serif;
        color: #D1D1D1;
        background: #ccc;
        text-shadow: -1px -1px white,
        1px 1px #333;
    }
    
    .shadow7 {
        text-align: center;
        padding: 24px;
        margin: 0;
        font: bold 80px helvetica, Arial, sans-serif;
        color: #D1D1D1;
        background: #ccc;
        text-shadow: 1px 1px white,
        -1px -1px #333;
    }
    
    .shadow8 {
        text-align: center;
        padding: 24px;
        margin: 0;
        font: bold 80px helvetica, Arial, sans-serif;
        color: #D1D1D1;
        background: #ccc;
        text-shadow: -1px 0 black,
        0 1px black, 1px 0 black, 0 -1px black;
    }
    .shadow9 {
        text-align: center;
        padding: 24px;
        margin: 0;
        font: bold 80px helvetica, Arial, sans-serif;
        color: #D1D1D1;
        background: #ccc;
        text-shadow: 0 0 0.2em #F87,0 0 0.2em #F87;

    效果:

    本文来自博客园,作者:木子欢儿,转载请注明原文链接:https://www.cnblogs.com/HGNET/p/15294416.html

  • 相关阅读:
    【转】android布局属性详解
    【转】Android开发学习笔记:5大布局方式详解
    【转】android:layout_gravity和android:gravity的区别
    【转】Android fill_parent和wrap_content分析
    @SuppressWarnings的使用、作用、用法
    android bin目录下的.ap_是神马文件?
    Android 工程目录结构简介
    安卓dalvik和art区别
    Android下HelloWorld项目的R.java文件介绍
    android的R.java
  • 原文地址:https://www.cnblogs.com/HGNET/p/15294416.html
Copyright © 2011-2022 走看看