text-shadow好看特效代码展示

文章目录

        • 一:全部效果展示:
        • 二:代码展示:
        • 三:代码说明:

一:全部效果展示:

text-shadow好看特效代码展示_第1张图片

二:代码展示:


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            background: #000;
            text-align: center;
            font-weight: bold;
            font-size: 40px;
            font-family: arial, sans-serif;
            height: 80px;
            line-height: 80px;
            color: brown;
        }
        p {
            background: #999;
            text-align: center;
        }
        #fire {
            text-shadow: 0 0 4px white,
            0 -5px 4px #ff3,
            2px -10px 6px #fd3,
            -2px -15px 11px #f80,
            2px -25px 18px #f20;
        }
        #effect2 {
            color: #fff;
            background: #666;
            text-shadow: #000000 0.1em 0.1em 0.2em;
        }
        #effect3 {
            background: #fff;
            text-shadow: 0.2em 0.5em 0.1em #600,
            -0.3em 0.1em 0.1em #060,
            0.4em -0.3em 0.1em #006;
        }
        #effect4 {
            color: #d1d1d1;
            text-shadow: -1px -1px white,
        1px 1px #333;
        }
        #effect5 {
            color: #d1d1d1;
            text-shadow: 1px 1px white,
            -1px -1px #333;
        }
        #effect6 {
            text-shadow: -1px 0 white,
        0 1px white,
        1px 0 white,
        0 -1px white;
        }
        #effect7 {
            color: #d1d1d1;
            background: #ccc;
            text-shadow: 0 0 0.2em #F87,
        0 0 0.2em #F87;
        }
    style>
head>
<body>
    <p>效果:1,火焰效果p>
    <div id="fire">吴小迪div>
    <p>效果:2,增加前背景色后背景色p>
    <div id="effect2">吴小迪div>
    <p>效果:3,定义多色阴影p>
    <div id="effect3">吴小迪div>
    <p>效果:4,定义立体突出文字p>
    <div id="effect4">吴小迪div>
    <p>效果:5,定义立体凹入文字p>
    <div id="effect5">吴小迪div>
    <p>效果:6,定义描边文字p>
    <div id="effect6">吴小迪div>
    <p>效果:7,定义外发光文字p>
    <div id="effect7">吴小迪div>
body>
html>

三:代码说明:

文本阴影的参数如下:

参数 描述 吴迪自己的理解
h-shadow 必需的,水平阴影的位置,可以负值 控制影子的x轴位置,正值则是在右边,负值在左边
v-shadow 必需的,垂直阴影的位置,可以负值 控制影子的y轴位置 ,正值则是在下面,负值在上面
blur 可选,模糊距离 控制影子的模糊度
color 可选,阴影颜色 控制影子的颜色

text-shadow属性可以接受一个以逗号分割的阴影效果列表,并应用到该元素的文本上。阴影效果按照顺序应用,因此他有可能出现互相覆盖,但是他们永远不会覆盖文本本身。阴影效果不会改变框的尺寸,但有可能延伸到它的边界之外。阴影效果的堆叠层次和元素本身的层次是一样的。

你可能感兴趣的:(HTML与CSS专栏,text-shadow,text-shadow效果,text-shadow好看效果,text-shadow详细介绍,css好看样式)