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: 700;
}

.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: 0;
    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', '微软雅黑', '宋体', 5b8b4f53, 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: 0;
    clear: both
}

.clearfix {
    zoom: 1
}

.clear {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    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动画的设计图大家也可以给我留言，柯基会努力实现的。

加油！！！