效果如下：
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;
}
网友评论