CSS中text-shadow的几个好看的文字demo及其代码

最近有看到一些镂空的或者立体的文字设计图非常好看，然后想了想，应该是使用text-shadow来实现的，这里我贴出我仿的八个demo，分享给大家

　

首先是HTML代码

 <div class="test-all-font">
     <p class="test">Love Yourself</p>
     <p class="test">Love Yourself</p>
     <p class="test">Love Yourself</p>
     <p class="test">Love Yourself</p>
     <p class="test">Love Yourself</p>
     <p class="test">Love Yourself</p>
     <p class="test">Love Yourself</p>
     <p class="test">Love Yourself</p>
 </div>

然后是CSS代码

 .test-all-font>p {
     float: left;
     width: 47%;
     height: 60px;
     margin-left: 2%;
     margin-top: 20px;
     line-height: 60px;
     font-weight:;
 }

 .test-all-font>p:nth-child(1) {
     color: #333;
     text-shadow: -0.2px -0.2px 0.1px #ffffff;
     background-color: #454545;
 }

 .test-all-font>p:nth-child(2) {
     color: #caccc8;
     text-shadow: -0.3px -0.2px 0.1px #000, 0.4px 0.3px 0.1px #fff;
     background-color: #d5d2c1;
 }

 .test-all-font>p:nth-child(3) {
     color: #fff;
     text-shadow: -1px -1px 6px #E702E9, 1px 1px 6px #E702E9, -1px 1px 6px #E702E9, 1px -1px 6px #E702E9;
     background-color: #0B000A;
 }

 .test-all-font>p:nth-child(4) {
     color: #6f7070;
     text-shadow: -0.4px -0.4px 0.4px #5bcd59, 0.4px 0.4px 0.4px #5bcd59;
     background-color: #EDEDED;
 }

 .test-all-font>p:nth-child(5) {
     color: #fff;
     text-shadow: 0.4px 1px 2px #A5A5A5;
     background-color: #DDD;
 }

 .test-all-font>p:nth-child(6) {
     color: #D5D2C1;
     text-shadow: 0.2px 0.2px 0.2px #000, -0.2px -0.2px 0.2px #000, 0.2px -0.2px 0.2px #000, -0.2px 0.2px 0.2px #000;
     background-color: #D5D2C1;
 }

 .test-all-font>p:nth-child(7) {
     color: #f95e7a;
     text-shadow: 0.4px 0.4px 3px #f95e7a, -0.4px -0.4px 3px #f95e7a, -0.4px 0.4px 3px #f95e7a, -0.4px 0.4px 3px #f95e7a;
     background-color: #EDEDED;
 }

 .test-all-font>p:nth-child(8) {
     color: #FD0A04;
     text-shadow: 0px -3px 4px #F59651,0px -2px 3px #F59651,0px -1.5px 2px #FB6229,0px -1px 1.5px #FB6229,0px -0.5px 1px #FB6229;
     background-color: #EDEDED;
 }

注意的点有：1、text-shadow是可以重复的，但是别重新写一个text-shadow，可以在你的样式后面继续跟，中间使用空格隔开就行了，例如：

p{
    text-shadow:1px 1px 1px #DDD,1px 1px 1px #000;
}

2、前两个值是可以为负数的，第一个值代表X轴正方向的偏移量，第二个值代表Y轴的负方向偏移量（大家最好用实践来熟悉它）。

3、大家使用这段代码的时候可能会没有我的示例图出现的效果，是因为浏览器有着默认的margin和padding等，大家要用代码去消除他，最简单的方式是使用样式重置表来消除浏览器默认样式

 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
     margin:;
     padding: 0
 }

 html {
     color: #000;
     overflow-y: scroll;
     overflow: -moz-scrollbars-vertical
 }

 body, button, input, select, textarea {
     font-size: 12px;
     font-family: arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial, Helvetica, STHeiti
 }

 h1, h2, h3, h4, h5, h6 {
     font-size: 100%
 }

 em {
     font-style: normal
 }

 small {
     font-size: 12px
 }

 ul, ol {
     list-style: none
 }

 a {
     text-decoration: none
 }

 a:hover {
     text-decoration: underline
 }

 legend {
     color: #000
 }

 fieldset, img {
     border: 0
 }

 button, input, select, textarea {
     font-size: 100%
 }

 table {
     border-collapse: collapse;
     border-spacing: 0
 }

 img {
     -ms-interpolation-mode: bicubic
 }

 textarea {
     resize: vertical
 }

 .left {
     float: left
 }

 .right {
     float: right
 }

 .overflow {
     overflow: hidden
 }

 .hide {
     display: none
 }

 .block {
     display: block
 }

 .inline {
     display: inline
 }

 label, button {
     cursor: pointer
 }

 .clearfix:after {
     content: '\20';
     display: block;
     height:;
     clear: both
 }

 .clearfix {
     zoom: 1
 }

 .clear {
     clear: both;
     height:;
     line-height:;
     font-size:;
     visibility: hidden;
     overflow: hidden
 }

 .wordwrap {
     word-break: break-all;
     word-wrap: break-word
 }

 pre.wordwrap {
     white-space: pre-wrap
 }

 body {
     text-align: center
 }

 body, form {
     position: relative
 }

 td {
     text-align: left
 }

 img {
     border: 0
 }

也可以自己来设置，这里只是简单给一个建议。如果还有好看的字阴影设计图或是C3动画的设计图大家也可以给我留言，柯基会努力实现的。

加油！！！