CSS实现字体镂空效果、阴影效果、字体阴影效果

1.文字镂空效果

1.1.创建一个div，用于存放需要镂空的文字

<div class="box1">
            <h1>镂空效果</h1>
  </div>

1.2.编写css

.box1{
            width: 200px;
            height: 100px;
            margin: 0 auto;
            background-color: aqua;
            text-align: center;
            -webkit-text-stroke: 1px red; //文字描边
            color: transparent;   //字体颜色设置为透明
        }

1.3.效果

2.阴影效果

2.1、html

 <div class="box2"></div>

2.2、css

         .box2{
                    width: 100px;
                    height: 100px;
                    margin: 0 auto;
                    border: 1px solid black;
                    box-shadow: 1px 1px 20px 5px #69de32 inset, /* 第一个1px是左右偏移量，第二个是上下偏移量，第三个是发散的宽度，第四个是阴影的宽度。inset代表内边阴影,不加代表外边阴影 */
                    1px 1px 10px 5px red;  /* //可以加多个阴影 */
                }
        

2.3.、效果

3.文字阴影

3.1、html

        <p>文字阴影</p>

3.2、css 

p{
            font-size: 50px;
            color: #959595;
            text-align: center;
            text-shadow: 1px 1px 3px red;
           } 

3.3、效果