博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用CSS3创建3D文本效果
阅读量:6429 次
发布时间:2019-06-23

本文共 526 字,大约阅读时间需要 1 分钟。

HTML部分:

<p class=”threeD”>The Third Dimension</p>

CSS部分:

深度效果使用多层text-shadow,使用offset和blur产生偏移效果。

  1. p.threeD
  2. {
  3.     text-shadow:
  4.         -1px 1px 0 #ddd,
  5.         -2px 2px 0 #c8c8c8,
  6.         -3px 3px 0 #ccc,
  7.         -4px 4px 0 #b8b8b8,
  8.         -4px 4px 0 #bbb,
  9.         0px 1px 1px rgba(0,0,0,.4),
  10.         0px 2px 2px rgba(0,0,0,.3),
  11.         -1px 3px 3px rgba(0,0,0,.2),
  12.         -1px 5px 5px rgba(0,0,0,.1),
  13.         -2px 8px 8px rgba(0,0,0,.1),
  14.         -2px 13px 13px rgba(0,0,0,.1)
  15.         ;
  16. }

在Firefox, Chrome, Safari or Opera下效果不错,但IE中只有IE10才有这个效果!

效果页面:

 

转载于:https://www.cnblogs.com/JavaTechLover/archive/2012/06/25/2560996.html

你可能感兴趣的文章
如何把win7 旗舰版升级到sp1最新版本
查看>>
Software Enginering-------using git
查看>>
浅谈IP地址-1
查看>>
我的友情链接
查看>>
C#中的线程池使用(一)
查看>>
利用Windows Server Backup功能备份活动目录
查看>>
RAC维护手记08-ASM磁盘组信息查看常用命令
查看>>
实验08 磁盘和文件系统管理
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
FastDFS整合nginx后,nginx一直报错
查看>>
使用Fuel安装OpenStack juno之三使用OpenStack创建云主机和Volume
查看>>
zabbix安装源
查看>>
Eclipse+kafka集群 实例源码
查看>>
Vijos 1067Warcraft III 守望者的烦恼
查看>>
SQL语句
查看>>
LinkedList
查看>>
Python number
查看>>
【Lv1-Lesson008】A Guide to Birthdays
查看>>
MySQL_PHP学习笔记_2015.04.19_PHP连接数据库
查看>>