css怎么设置字体立体


当前第2页 返回上一页

/*简单的效果*/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.effect01{

    background-color: #7ABCFF;

    color:#FFD300;

    text-shadow:

        0px 0px 0 #b89800,

        1px -1px 0 #b39400,

        2px -2px 0 #ad8f00,

        3px -3px 0 #a88b00,

        4px -4px 0 #a38700,

        5px -5px 0 #9e8300,

        6px -6px 0 #997f00,

        7px -7px 0 #947a00,

        8px -8px 0 #8f7600,

        9px -9px 0 #8a7200,

        10px -10px 0 #856e00,

        11px -11px 0 #806a00,

        12px -12px 0 #7a6500,

        13px -13px 12px rgba(0, 0, 0, 0.55),

        13px -13px 1px rgba(0, 0, 0, 0.5);

}

从中我们可以看出,利用text-shadow实现立体效果的要素有三:

设置多个阴影实现纵深感,

阴影的水平和垂直偏移变化实现方向感,

阴影的颜色渐变实现错落感。

以上就是css怎么设置字体立体的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

js和css文件位置对页面性能有什么影响?

css怎么设置图片圆角

css怎么实现超出范围加滚动条

css中如何给背景图片加上超链接

css的flex怎么根据内容更改高度

css outline-offset属性怎么用

css如何让高度自适应

如何修改织梦css

css文件开头怎么写

css如何清除背景颜色

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...