文字阴影text-shadow笔录

青春..荒唐

浏览: 971879 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS
常见特效

CSS 常见特效

今天来介绍下CSS3的文本阴影特效text-shadow，及常见的适用场景和效果展示

【概述】

text-shadow 为文字添加阴影

①可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开；

②要为每个阴影指定相对文字的偏移量，可选的颜色及模糊半径；

③多个阴影从前往后叠加，第一个阴影在最前面；

④可以应用在::first-line和::first-letter伪元素上

【兼容】

为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用text-shadow属性时，我们需要将属性的名称前面加上前缀，具体为

谷歌和苹果浏览器-webkit-text-shadow的形式；

Firefox浏览器则需要写成-moz-text-shadow的形式；

欧朋（Opera）浏览器 -o-text-shadow；

IE9+需要写成-ms-text-shadow的形式

【详解】

（1）语法

text-shadow:offset-x | offset-y | blur-radius | color

①offset-x指定水平偏移量，若是负值则阴影位于文字左边（必选）

②offset-y 指定垂直偏移量，若是负值则阴影位于文字上面（必选）

如果两者均为0，则阴影位于文字正后方（如果设置了 blur-radius 则会产生模糊效果)

③blur-radius：模糊半径，如果没有指定则默认为0。值越大，模糊半径越大，阴影也就越大越淡（可选）

注意：模糊程度/半径必须为正整数。

④color：阴影的颜色，可以在偏移量之前或之后指定

（2）案例展示

文本阴影分为单阴影和多阴影，下面分开介绍

①单阴影

先来看个简单例子：

 p{
            text-align:center;
            margin:0;
            font-family:helvetica,arial,sans-serif;
            color:#999;
            font-size:80px;
            font-weight:bold;
            text-shadow:0.1em 0.1em #333;//右下角阴影
            /*text-shadow:-0.1em -0.1em #333;//左上角阴影*/
            /*text-shadow:-0.1em 0.1em #333;//左下角阴影*/
            /*text-shadow:0.1em -0.1em #333;//右上角阴影*/
            /*text-shadow:0.1em 0.1em 0.3em #333;//增加模糊效果的阴影*/
            /*text-shadow:0.1em 0.1em 0.3em black;//定义文本阴影效果*/
        }

分别为左上角，右上角，左下角和右下角阴影，以及增加模糊效果，定义文本阴影效果等

②多阴影

阴影叠加，每个阴影之间用逗号隔开。每个阴影效果必须指定阴影偏移值，而模糊半径和阴影颜色是可选参数

案例：燃烧文字特效

p{
    text-align:center;
    margin:0;
    padding:24px;
    font-family:helvetica,arial,sans-serif;
    font-size:80px;
    font-weight:bold;
    color:#000;//设置文字颜色
    background:#000;//设置背景颜色
    text-shadow:0 0 4px white, 
                0 -5px 4px #ff3,
                2px -10px 6px #fd3,
                -2px -15px 11px #f80,
                2px -25px 18px #f20;//使用阴影叠加出燃烧的文字特效
}

当然，还有其他许多经常看到的，例如：外发光，辉光，投影，浮雕，模糊，扫边，3D等效果。

效果一：

text-shadow: 0 0 20px red;

效果二：

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;

效果三：

text-shadow: 0 1px 1px #fff;

效果四：

text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;

效果五：

text-shadow: 0 0 5px #f96;

效果六：

text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;

效果七：

text-shadow: 1px 1px 0 #E4F1FF;

效果八：利用text-shadow在不同方向的偏移量

text-shadow: 3px 3px 0 red,-3px 3px 0 red,3px -3px 0 red,-3px -3px 0 red;

效果九：利用text-shadow在同一方向的叠加效果

text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);

效果十：利用text-shadow在同一方向的叠加效果

text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8);

效果十一：

text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;    /*注意：第一个阴影色和背景色相同；文本前景色和第二个阴影色相同*/

最后分享个文本阴影特效应用：黑猫警长首页

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本阴影</title>
    <style type="text/css">
        body {/*清除页边距，设计主色调*/
            padding: 0px;
            margin: 0px;
            color: #666;
        }
        #text-shadow-box {/*设计盒子外框样式*/
            position: relative;/*让内部的定位元素以这个框为参照物*/
            width: 598px;
            height: 406px;
            background: #666;
            overflow: hidden;/*禁止内容超过设定的区域*/
            border: #333 1px solid;
        }
        #text-shadow-box div.wall {/*设置背景墙样式*/
            position: absolute;
            width: 100%;
            top: 175px;
            left: 0px
        }
        #text {/*设计导航文本样式*/
            text-align: center;
            line-height: 0.5em;
            margin: 0px;
            font-family: helvetica, arial, sans-serif;
            height: 1px;
            color: #999;
            font-size: 80px;
            font-weight: bold;
            text-shadow: 5px -5px 16px #000;
         /*设计右上偏移的阴影，适当进行模糊处理，
           产生色晕效果，阴影色为深色，营造静谧的效果*/
        }
        div.wall div {/*设计前面挡风板样式*/
            position: absolute;
            width: 100%;
            height: 300px;
            top: 42px;
            left: 0px;
            background: #999;
        }
        #spotlight {/*设计覆盖在上面的探照灯效果图*/
            position: absolute;
           /*设计一个层，让其覆盖在页面上，并使其满窗口显示，
           通过前期设计好的一个探照灯背景来营造神秘效果*/
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: url() center -300px;
        }
        #spotlight a {
            color:#ccc;
            text-decoration:none;
            position:absolute;
            left:47%;
            top:56%;
            float:left;
        }
        a img { border:none; }
    </style>
</head>
<body>
<!--本案例的结构外套-->
<div id="text-shadow-box">
    <!--墙体外结构-->
    <div class="wall">
        <p id="text">黑猫警长</p>
        <div></div>
    </div>
    <!--外罩，通过他可以为页面覆盖一层桌纸，添加特殊的艺术效果-->
    <div id="spotlight"><a href="index.htm"><img src="" /></a></div>
</div>
</body>
</html>

分享到：

圆形进度条效果 | CSS文本属性笔录

2018-02-08 20:27
浏览 703
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论