text-shadow ：x轴偏移量 y轴偏移量 模糊半径 颜色

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         body{
    9.             background: #0ff;
    10.         }
    11.         div{
    12.             width: 600px;
    13.             font-size: 100px;
    14.             margin: 100px auto;
    15.             color: #ddd;
    16.             /* 浮雕效果 文字上面为白色，因为上面会有光照到 */
    17.             text-shadow: 3px 3px #000, -1px -1px #fff ;
    18.             /* 镂刻效果 文字上面会有阴影 */
    19.             /* text-shadow: -1px -3px #000; */
    21.         }
    22.     </style>
    23. </head>
    24. <body>
    25.     <div>This is a text</div>
    26. </body>
    27. </html>

    浮雕效果图
    image.png
    镂刻效果图
    image.png
    demo1

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         body{
    9.             background: #000;
    10.         }
    11.         div{
    12.             font-size: 100px;
    13.             width: 540px;
    14.             height: 100px;
    15.             position: absolute;
    16.             left: calc(50% - 350px);
    17.             top: 100px;
    18.             color: #fff;
    19.             text-shadow: 0px 5px 10px #0f0,
    20.                          0px 10px 20px #0f0,
    21.                          0px 15px 30px #0f0;
    22.             transition: all .3s;
    23.             /* border: 1px solid #fff; */
    24.         }
    25.         div:hover{
    26.             left: calc(50% - 270px);
    27.             text-shadow: 0px -5px 10px #f00,
    28.                          0px -10px 20px #f10,
    29.                          0px -15px 30px #f20;
    31.         }
    32.         div::before{
    33.             content: "NO";
    34.             width: 380px;
    35.             color: #fff;
    36.             margin-right: 5px;
    37.             text-shadow: 0px -5px 10px #f00,
    38.                          0px -10px 20px #f10,
    39.                          0px -15px 30px #f20;
    40.             opacity: 0;
    42.         }
    43.         div:hover::before{
    44.             opacity: 1;
    45.         }
    46.     </style>
    47. </head>
    48. <body>
    49.     <div>ACCESS</div>
    50. </body>
    51. </html>

    效果图
    image.pngimage.png
    demo2
    当text-shadow 与 -webkit-background-clip 一起设置时文字里的背景图不会出现
    原因:shadow 的x与y轴偏移量为0时会挡住背景图，当把文字里设置背景图时文字就成啦背景图，背景图会在文字下面显示，而阴影则是文字内容

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         body{
    9.             background: #000;
    10.         }
    11.         div{
    12.             width: 600px;
    13.             font-size: 100px;
    14.             position: absolute;
    15.             left: calc(50% - 300px);
    16.             top: 100px;
    17.             font-weight: bold;
    18.             background-image: url(/2.jpg);
    19.             background-position: -600px  -62px;
    20.             background-repeat: no-repeat;
    21.             background-size: 600px 300px;
    22.             -webkit-background-clip: text;
    23.             background-clip: text;
    24.             -webkit-text-fill-color: transparent;
    25.             transition: all .3s;
    26.             /* 当shadow 的x与y轴偏移量为0时会挡住背景图，当把文字里设置背景图时文字就成啦背景图，背景图会在文字下面显示，而阴影则是文字内容，也是文字的一部分，设置x与y轴偏移量为0时会遮挡背景图 */
    27.             text-shadow: -5px -5px 3px rgba(255, 0, 255, .2),
    28.                          5px 5px 3px rgba(0, 255, 255, .3); 
    30.         }
    31.         div:hover{
    32.             background-position: 0px -62px;
    33.         }
    34.     </style>
    35. </head>
    36. <body>
    37.     <div>这是一段文字</div>
    38. </body>
    39. </html>

    效果图
    image.png
    image.png
    demo4

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         div{
    9.             width: 900px;
    10.             font-size: 100px;
    11.             font-weight: bold;
    12.             position: absolute;
    13.             left: calc(50% - 450px);
    14.             top: 100px;
    15.             color: #f10;
    16.             text-shadow: 0px 0px 5px #f10,
    17.                          0px 0px 10px #f20,
    18.                          0px 0px 15px #f30;
    19.         }
    20.         div:hover{
    21.             text-shadow: 10px 10px 5px #f90,
    22.                          -10px -15px 10px #ff0,
    23.                          10px 15px 10px #0f0,
    24.                          20px 20px 10px #0ff,
    25.                          -20px -5px 10px #f0f,
    26.                          20px -20px 15px #000;
    27.         }
    28.     </style>
    29. </head>
    31. <body>
    32.     <div>COME WITH ME</div>
    33. </body>
    34. </html>

    效果图
    image.pngimage.png