CSS3文字调整技巧

效果如下：

html

css：

dd{

margin:0;

}

dd,dt{

display:inline;

}

dd+dt:before{

content:'\A';

white-space:pre;

}

dd+dd:before{

content:',';

font-weight:normal;

}

2.镂空文字

p{

font-family:Arial;

color:#fff;

text-shadow:1px 1px #000,

-1px -1px #000,

1px -1px #000,

-1px 1px #000;

}

3.定制下划线

.cont{

width:500px;

height:100px;

line-height:100px;

background:linear-gradient(90deg, #f1d35b 70%,transparent 0) repeat-x;

background-size:1em 2px;

background-position:0 4em;

}

4.鼠标移入，文字变模糊

.cont{

width:500px;

height:50px;

text-align:center;

background:#000;

color:#fff;

transition:1s;

}

.cont:hover{

color:transparent;

text-shadow:0 0 5px  #fff,0 0 10px  #fff;

}

5. 3D文字

.cont{

width:500px;

height:100px;

line-height:100px;

background:#a6f16c;

font-size:24px;

color:#fff;

text-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000,4px 4px #000,5px 5px #000,6px 6px #000;

}