首页 > Web开发 > 详细

CSS3学习——立体文字

时间:2014-01-15 23:49:01      阅读:519      评论:0      收藏:0      [点我收藏+]

 

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

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

<p class="p1">Text Shadow</p>
<p class="p2">Text Shadow</p>
bubuko.com,布布扣
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;
}
bubuko.com,布布扣

bubuko.com,布布扣

CSS3学习——立体文字

原文:http://www.cnblogs.com/baixc/p/3515571.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!