ccs-基础-阴影

1.html代码

<div class="demo demo1">假如生活欺骗了你</div>
<div class="demo demo2">假如生活欺骗了你</div>
<div class="demo demo3">假如生活欺骗了你</div>
<div class="demo demo4">假如生活欺骗了你</div>
<div class="demo demo5">假如生活欺骗了你</div>
<div class="demo demo6">假如生活欺骗了你</div>
<div class="demo demo7">假如生活欺骗了你</div>

2.css全局代码

div{
            padding: 0;
            margin: 0;
        }
        .demo{
            width: 600px;
            padding: 30px;
            background-color: #666;
            margin: 20px auto;
            text-align: center;
            font: bold 80px/100% "微软雅黑";
            color: #fff;
        }

3.下面是每一个dome添加的阴影样式和效果图

.demo1{
            text-shadow: -2px -2px 14px red;
        }

.demo2{
            text-shadow: 0 0 20px #fff;
        }

.demo3{
            text-shadow: 0 0 30px red,0 0 50px #fff;
        }

.demo4{
            color: #000;
            text-shadow: 0 1px 0px #fff;
        }

这也是我比较喜欢的一个样式

.demo5{
            text-shadow: -1px -1px 0px #ddd,-2px -2px 0px #ccc,-3px -3px 0px #bbb,-4px -4px 0px #aaa;
        }

这也是我比较喜欢的一个样式

.demo6{
            text-shadow: 0px -1px 0px #ddd,0px -2px 0px #ccc,0px -3px 0px #bbb,0px -4px 0px #aaa;
        }

.demo7{
            color: transparent;
            text-shadow: 0 0 8px hsla(25,100%,50%,1);
        }