当前第2页 返回上一页
/*简单的效果*/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .effect 01 {
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》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么设置字体立体