CSS3学习——立体文字

浏览数：21 / 时间：2015年06月09日

 

1、通过在文本的左上和右下各添加 1像素的错位补色阴影，可以实现。

2、在上面的基础上反向设计阴影颜色即可。

<p class="p1">Text Shadow</p>
<p class="p2">Text Shadow</p>
body{
    background-color: #ccc;
}
p{
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica,arial,sans-serif;
    color: #d1d1d1;
    font-size: 80px;
    font-weight: bold;
}
.p1{
    text-shadow:-1px -1px white,
                1px 1px #333;
}
.p2{
    text-shadow:1px 1px white,
                -1px -1px #444;
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 代码 text 学习 代码 text 学习

相关文章

随机文章

您可能还喜欢

您可能还喜欢