标签：欺骗 text 基础 ccs 阴影 假如 2px shadow 0px

1.html代码

 

1 <div class="demo demo1">假如生活欺骗了你</div>
2 <div class="demo demo2">假如生活欺骗了你</div>
3 <div class="demo demo3">假如生活欺骗了你</div>
4 <div class="demo demo4">假如生活欺骗了你</div>
5 <div class="demo demo5">假如生活欺骗了你</div>
6 <div class="demo demo6">假如生活欺骗了你</div>
7 <div class="demo demo7">假如生活欺骗了你</div>

 

2.css全局代码

 

 1 div{
 2             padding: 0;
 3             margin: 0;
 4         }
 5         .demo{
 6             width: 600px;
 7             padding: 30px;
 8             background-color: #666;
 9             margin: 20px auto;
10             text-align: center;
11             font: bold 80px/100% "微软雅黑";
12             color: #fff;
13         }

 

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

 

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

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

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

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

 

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

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

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

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

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

 

标签：欺骗,text,基础,ccs,阴影,假如,2px,shadow,0px
来源： https://www.cnblogs.com/FengBrother/p/11369822.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。